This is my 23rd day of the Genwen Challenge

Not many words, first look at the effect:

Thus, with jitter: Without jitter:

Implementation:

1. Define a bottom box:

<body>
    <div class="tu"></div>
</body>
Copy the code

2. Basic styles, long and wide background images, etc

 .tu{
            width: 500px;
            height: 300px;
            background-image: url(8.jpg);
            background-size: 100% auto;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
Copy the code

cursor: pointer; Mouse through the box style for small hands

3. Use double pseudo-class elements as scan lines. The basic CSS styles are as follows:

 .tu::after{
            content: ' ';
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 35px;
            background-image: url(8.jpg);
            background-size: 100% auto;
            background-repeat: no-repeat;
            filter: sepia(100%); 
            opacity: 0;
           
        }
Copy the code

filter: sepia(100%); The picture is yellow.

filter: invert(100%); Like an X-ray film.

Opacity: 0; Transparency is zero.

4. Scan:

.tu:hover::after{
            opacity: 1;
            animation: move 1.8 s linear infinite;
        }
        @keyframes move{
            0%{
                top: 0;
                background-position: 6px 0px; 
            }
            20%{
                top: 60px;
                background-position: -6px -60px; 
            }
            40%{
                top: 120px;
                background-position: 6px -120px; 
            }
            60%{
                top: 180px;
                background-position: -6px -180px; 
            }
            80%{
                top: 240px;
                background-position: 6px -240px; 
            }
            100%{
                top: 300px;
                background-position: -6px -300px; }}Copy the code

Make the background-position’s Y-axis displacement exactly equal to the distance from top. If the X-axis is 0, it will not shake. If there is a value, it will shake.

The complete code is as follows, free access, copy good:

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(0.0.0);
        }
        .tu{
            width: 500px;
            height: 300px;
            background-image: url(8.jpg);
            background-size: 100% auto;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .tu::after{
            content: ' ';
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 20px;
            background-image: url(8.jpg);
            background-size: 100% auto;
            background-repeat: no-repeat;
            filter: invert(100%); 
            opacity: 0;
           
        }
        .tu:hover::after{
            opacity: 1;
            animation: move 1.8 s linear infinite;
        }
        @keyframes move{
            0%{
                top: 0;
                background-position: 6px 0px; 
            }
            20%{
                top: 60px;
                background-position: -6px -60px; 
            }
            40%{
                top: 120px;
                background-position: 6px -120px; 
            }
            60%{
                top: 180px;
                background-position: -6px -180px; 
            }
            80%{
                top: 240px;
                background-position: 6px -240px; 
            }
            100%{
                top: 300px;
                background-position: -6px -300px; }}</style>
</head>
<body>
    <div class="tu"></div>
</body>
</html>
Copy the code

Conclusion:

This is the Internet to see a foreign blogger’s creativity, and then their own also made a, although the effect is relatively simple, but also quite fun ~

See you next time