Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Interesting front-end CSS special effects – Express scan rack

See the above dynamic effect, will not think it is a logistics scan animation effect. No, this is a CSS animation with no images of any kind. Isn’t it amazing that it looks like the package and the scanning frame in the middle are all pictures? So let’s do it again.

1. Define the parent container first.

div{
    position: relative; 
    height: 400px;
}
Copy the code

Here we just define the height of the container, so the width goes straight to the full screen

2. Define the transport strip and logistics package

This is where the magic comes in. It’s all chaotic until all the Settings are done.

background-image: / / logistics package gradient linear gradient (30% to right, transparent, # d2b48c 30%, # d2b48c 47%, # ddc7a9 47%, # ddc7a9 53%, # d2b48c 53%, # d2b48c 70%,transparent 70%), Linear gradient(to right,transparent,rgba(0,0,0,0.3) 20%,rgba(0,0,0,0.3) 80%,transparent), Linear gradient(45deg,# BBB 22%,#888 22%,#888 25%,# BBB 25%,# BBB 75%,#888 75%,#888 78%,# BBB 78%), Rgba (255,255,255,0.9) 8px,rgba(255,255,255,0.9) 11px transparent 11px Linear gradient(-45deg,# BBB 22%,#888 22%,#888 25%,# BBB 25%,# BBB 75%,#888 75%,#888 78%,# BBB 78%), // Linear gradient(to bottom,#666 50%,#555 50%);Copy the code

After setting background-image, the following basic images exist.

Then set background-size as follows

Div {background-size: 200px 70px,290px 11.5%,200px 7px,100px 30px,200px 7px,200px 10%; }Copy the code

By setting size to the background-image color block, we get the image below as a full screen tile

Then set positioning and background repetition

Div {background-position: 50% 56.2%,50% 72.2%,0 65%,50% 71%,0 75%,0 72%; background-repeat: repeat-x,no-repeat,repeat-x,repeat-x,repeat-x,repeat-x; }Copy the code

You get a complete logistics conveyor belt

3. Define the scan box

Select set the pseudo class to the parent container and center it

 div:before, div:after {
        display: block;
        content: '';
        position: absolute;
    }
Copy the code

Since the scanning frame is stationary, but the logistics package is sliding when entering, the scanning frame is divided into two parts here.

Stationary part (Scanning frame)

div:before { width: 200px; height: 202px; left: 50%; margin-left: -100px; top: 27%; background-image: Linear gradient(165deg,rgba(255,255,255,0.15) 25% transparent 25%), Linear-gradient (to right,#002525,#002525), Transparent (to right,transparent 20%,# 1AA093 20%,# 1AA093 40%,transparent 40%,transparent 60%,# 1AA093 Radial -gradient(circle,#1ba99b 50%,transparent 50%), radial-gradient(circle,#1ba99b 50%,transparent 50%), radial-gradient(circle,#1ba99b 50%,transparent 50%), Linear-gradient (to bottom,#40e0d0 90%,# 21CCBB 90%); background-size: 164px 130px,170px 130px,100% 10px,16px 16px,16px 16px,16px 16px,100% 100%; background-position: 50% 27%,50% 22%,50% 100%,70% 85%,80% 85%,90% 85%,0 0; background-repeat: no-repeat; border-radius: 10px 10px 3px 3px; border-top: 3px solid #21ccbb; }Copy the code

Get the scan box below

Dynamic Part (Logistics Package diagram)

div:after { width: 170px; height: 130px; left: 50%; margin-left: -85px; top: 38%; background-image: Linear-gradient (to right,white,white), Repeating-linear-gradient (to bottom,white,white 2px,transparent 2px,transparent 12px), repeating-linear-gradient(to bottom,white,white 2px,transparent 2px,transparent 12px) // Linear gradient(to right,transparent 30%,#10635a 30%, Transparent 40%,transparent 60%,#10635a 70%,transparent 70%), Transparent (to right,transparent 35%,# 1AA093 34%,# 1AA093 44%,transparent 44%,transparent 45%,# 21CCBB 45%,#21ccbb 55%,transparent 55%,transparent 56%,#168a7f 56%,#168a7f 65%,transparent 65%), linear-gradient(to right,transparent 35%,#1eb6a7 34%,#1eb6a7 44%,transparent 44%,transparent 45%,#1aa093 45%,#1aa093 55%,transparent 55%,transparent 56%,#21ccbb 56%,#21ccbb 65%,transparent 65%), linear-gradient(to right,transparent 35%,#168a7f 34%,#168a7f 44%,transparent 44%,transparent 45%,#1aa093 45%,#1aa093 55%,transparent 55%,transparent 56%,#1eb6a7 56%,#1eb6a7 65%,transparent 65%), Linear gradient(to right,transparent 30%,#003e3f 30%,#003e3f 70%,transparent 70%); background-size: 2px 50px,8px 50px,200px 70px,200px 18px,200px 18px,200px 18px,200px 70px; background-position: 15px 40px,16px 40px,50% 56%,50% 40%,50% 58%,50% 76%,50% 56%; background-repeat: no-repeat,no-repeat,repeat-x,repeat-x,repeat-x,repeat-x,repeat-x; }Copy the code

I get this little box down here

Put all the effects together to get the image below

At this time the logistics scanning conveyor belt, logistics packages, scanners, scanning packages are completed. But it’s still static, so let’s get it moving!

4. Add dynamic effects

Define special effects code

@keyframes moveDiv {
        to {
            background-position-x: calc(50% + 200px),50%,200px,50%,-200px,0
        }
    }
    @keyframes moveAfter {
        to {
            background-position-x: 15px,16px,calc(50% + 200px),calc(50% + 200px),calc(50% + 200px),calc(50% + 200px),calc(50% + 200px)
        }
    }
Copy the code

Assign the effect to the corresponding box

div{
    animation: moveDiv 2000ms linear infinite;
}
div:after {
    animation: moveAfter 2000ms linear infinite;
}
Copy the code

Next, save the code and refresh the page. A dynamic delivery scan frame is complete!