“This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

There was a period of time last year when I wrote several large screens, some of which I thought were quite practical. The record is as follows, and some good plug-ins are also recorded.

A moving gradient background

The code is as follows:

/* ************ Gradient background Settings **************** */
@property --colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: fuchsia;
}
@property --colorC {
  syntax: '<color>';
  inherits: false;
  initial-value: #f79188;
}
@property --colorF {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.linear-gradient-bg {
    background: linear-gradient(45deg,
        var(--colorA),
        var(--colorC),
        var(--colorF));
    animation: change 10s infinite linear;
}
@keyframes change {
    20% {
        --colorA: red;
        --colorC: #a93ee0;
        --colorF: fuchsia;
    }
    40% {
        --colorA: #ff3c41;
        --colorC: #e228a0;
        --colorF: #2e4c96;
    }
    60% {
        --colorA: orange;
        --colorC: green;
        --colorF: teal;
    }
    80% {
        --colorA: #ae63e4;
        --colorC: #0ebeff;
        --colorF: #efc371; }}Copy the code

Flip CARDS

The outer card box is used for animation, rotateY to set the card to rotate 3D along the Y-axis. The two divs in the inner layer are used to put the contents to be displayed by flipping and substituting. Note the following:

  1. Need to set absolute positioning;

  2. The box on the front side is displayed normally, and rotateY(180deg) should be set for the reverse side (ordinary pictures are not required, but if there is a text, it needs to be added, otherwise the left and right sides of the text will be reversed), as shown below:

  3. Use the backface-visibility setting to make the back of an element invisible to the screen;

  4. You need to set the background color to be opaque, otherwise the text in the back div will appear superimposed.

The code is as follows:

<div class="perspective">
        <div class="card">
                <div class="easy-text-box">
                        <div class="easy-text-top"></div>
                        <div class="easy-text-bottom"></div>
                </div>
                <div class="easy-text-box2">
                        <div class="easy-text-top2"></div>
                        <div class="easy-text-bottom2"></div>
                </div>
        </div>
</div>
Copy the code
.card {
        width: 212px;
        height: 88px;
        transition-timing-function: cubic-bezier(0.075.0.82.0.165.1);
        transform-style: preserve-3d;
        -webkit-animation-name: mymove;
        -webkit-animation-duration: 20s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: cubic-bezier(0.075.0.82.0.165.1);
        -webkit-animation-delay: 0s;
}
@keyframes mymove {
        0% { transform: rotateY(0deg); } 
        41% { transform: rotateY(0deg); } 
        50% { transform: rotateY(180deg); }90% { transform: rotateY(180deg); }
        99% { transform: rotateY(0deg); }
        100%{}}.easy-text-box {
        z-index: 5;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}
.easy-text-box2 {
    transform: rotateY(180deg)}.easy-text-box..easy-text-box2 {
    background-color: # 091223;
    box-shadow: inset 0px 0px 59px 0px rgb(14 62 184 / 20%);
    border-radius: 9px;
    width: 206px;
    height: 81px;
    margin: 3px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.easy-text-top..easy-text-top2 {
	font-size: 30px;
	font-weight: bold;
	line-height: 30px;
	letter-spacing: 0px;
	color: #00e4ff;
  word-break: break-all;
  width: 100%;
  text-align: center;
}
.easy-text-bottom..easy-text-bottom2 {
        width: 123px;
        height: 19px;
        background-image: linear-gradient(90deg.#006ae1 0%.#16b7ff 100%), linear-gradient( #4895fc.#4895fc);
        font-size: 12px;
        letter-spacing: 1px;
        font-weight: bold;
        color: #ffffff;
        margin-top: 8px;
        text-align: center;
        line-height: 19px;
        border-radius: 4px;
}
Copy the code

A small tip

You get an advanced feel by setting up two divs, a line of bright dots in the background, a border or other line, and an animation that slowly moves to the right until it disappears.

About tabular rotation

LiMarquee can be used as a plugin for jquery, the implementation process is also very simple: configure the parameters can, the implementation effect is as follows:

So much for now, and then to supplement ~