84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
Website http://zm.163.com/
How to achieve this effect
It’s just a simple CSS3 animation
.light_pc { width: 93px; height: 9px; position: absolute; top: 0; left: 50%; margin-left: -46px; background: url(https://zm.res.netease.com/pc/fab/20161226201931/img/light_pc_f3d5dee.png?_sprite) no-repeat; -moz-animation: light_pc 4s linear 0s infinite; -webkit-animation: light_pc 4s linear 0s infinite; -o-animation: light_pc 4s linear 0s infinite; -ms-animation: light_pc 4s linear 0s infinite; animation: light_pc 4s linear 0s infinite } @-webkit-keyframes light_pc { 0% { top: 0 } 50% { top: 83px } 100% { top: 0 } } @-moz-keyframes light_pc { 0% { top: 0 } 50% { top: 83px } 100% { top: 0 } } @-ms-keyframes light_pc { 0% { top: 0 } 50% { top: 83px } 100% { top: 0 } } @-o-keyframes light_pc { 0% { top: 0 } 50% { top: 83px } 100% { top: 0 } } @keyframes light_pc { 0% { top: 0 } 50% { top: 83px } 100% { top: 0 } }
View elements and learn more about CSS animation
There is a p outside the QR code image that is the same height as the image Use: before to make a horizontal line Write css3 animation to move
I will also post my animation
demo { transform: translate3d(0, 0, 0); animation: bounce 0.8s infinite ease-out; } @-webkit-keyframes bounce { 50% { transform: translate3d(0, -0.2rem, 0); } }
It’s just a simple CSS3 animation
View elements and learn more about CSS animation
There is a p outside the QR code image that is the same height as the image
Use: before
to make a horizontal line
Write css3 animation to move
I will also post my animation