javascript - 一个可以上下摆动的html元素
本文介绍了javascript - 一个可以上下摆动的html元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
这个效果怎么实现的
解决方案
就是一个简单CSS3 动画
.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
}
}
这篇关于javascript - 一个可以上下摆动的html元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文