1, turn over

(1) Effect demonstration

(2) Complete code

<! doctypehtml>
<html>

<head>
    <title>Flip</title>
    <style>
        .flip {
            /* Sets the shape size */
            display: inline-block;
            width: 240px;
            height: 60px;
        }

        .wrap {
            /* Sets the shape size */
            display: inline-block;
            width: 100%;
            height: 100%;
            /* Set the transition effect */
            transition: transform 0.8 s;
            -webkit-transition: -webkit-transform 0.8 s;
            /* Preserve space */
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
        }

        .flip:hover .wrap {
            /* Set the hover effect */
            /* Rotate 180° along the X-axis */ while hovering over the element
            transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
        }

        .front-side {
            /* Set the location mode */
            position: absolute;
            /* Sets the shape size */
            display: inline-block;
            width: 100%;
            height: 100%;
            /* Set the layout */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /* Sets the element style */
            color: white;
            background-color: lightskyblue;
            /* Set back to hide */
            backface-visibility: hidden;
        }

        .back-side {
            /* Set the location mode */
            position: absolute;
            /* Sets the shape size */
            display: inline-block;
            width: 100%;
            height: 100%;
            transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
            /* Set the layout */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /* Sets the element style */
            color: white;
            background-color: deepskyblue;
            /* Set back to hide */
            backface-visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="flip">
        <div class="wrap">
            <div class="front-side">front side</div>
            <div class="back-side">back side</div>
        </div>
    </div>
</body>

</html>
Copy the code

2,

(1) Effect demonstration

(2) Complete code

<! doctypehtml>
<html>

<head>
    <title>Shiny</title>
    <style>
        .shiny {
            /* Sets the shape size */
            display: inline-block;
            width: 240px;
            height: 60px;
            /* Sets the element style */
            color: ghostwhite;
            background-color: skyblue;
            /* Set the layout */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /* Overflow hide */
            overflow: hidden;
            /* Position relative to */
            position: relative;
        }

        .shiny:after {/* Set the style */ content:"";
            background-color: rgba(255.255.255.0.2);
            /* Set the size */
            width: 30px;
            height: 90px;
            /* Set the shape */
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            /* Set the position */
            position: absolute;
            left: -50px;
            /* Set the transition effect */
            transition: left 0.4 s;
            -webkit-transition: left 0.4 s;
        }

        .shiny:hover:after {/* Set the hover effect */ /* Move the cursor to the right when hovering over the element */ left:120%;
        }
    </style>
</head>

<body>
    <div class="shiny">shiny-shiny</div>
</body>

</html>
Copy the code

3, glow

(1) Effect demonstration

(2) Complete code

<! doctypehtml>
<html>

<head>
    <title>Blink</title>
    <style>
        .wrap {
            /* Sets the appearance style */
            display: inline-block;
            width: 260px;
            height: 80px;
            background-color: black;
            /* Set the layout */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .blink {
            /* Sets the shape size */
            display: inline-block;
            width: 240px;
            height: 60px;
            /* Set the layout */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /* Sets the text color */
            color: ghostwhite;
            /* Sets the button boundary */
            outline: 1px solid rgba(255.255.255.0.5);
        }

        .blink:hover {
            /* Change the text color */
            color: white;
            /* Set the font shadow */
            text-shadow: 1px 1px 2px ghostwhite;
            /* Change button boundaries */
            border: 1px solid rgba(255.255.255.1);
            /* Sets the button shadow */
            box-shadow: 5px 5px 50px rgba(255.255.255.0.4) inset;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="blink">blink-blink</div>
    </div>
</body>

</html>
Copy the code