javascript - elemen html yang boleh berayun ke atas dan ke bawah

Question

Laman web http://zm.163.com/

Bagaimana untuk mencapai kesan ini

Answer 1

Ia hanyalah animasi CSS3 yang ringkas

.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
        }
    }

Answer 2

Lihat elemen dan ketahui lebih lanjut tentang animasi CSS

Answer 3

Terdapat p di luar imej kod QR yang sama tinggi dengan imej
Gunakan: sebelum
untuk membuat garisan melintang
Tulis animasi css3 untuk bergerak

Answer 4

Saya juga akan menyiarkan animasi saya

  demo {
  transform: translate3d(0, 0, 0);
  animation: bounce 0.8s infinite ease-out;
}
@-webkit-keyframes bounce {
  50% {
    transform: translate3d(0, -0.2rem, 0);
  }
}