记录一个常用的样式动作
元素代码
这里就不累述图片的变化了,直接默认是一个大div即可。
<!-- 图片集合-->
<div class="view" >
</div>
CSS代码
<style scoped>
.view {
/*
jumpBoxHandler 动作函数
2s 动作持续两秒
infinite 无限循环
*/
animation: jumpBoxHandler 2s infinite;
}
@keyframes jumpBoxHandler {
0% {
transform: translate(0px, 0px);/*开始位置*/
}
50% {
transform: translate(15px, 15px); /* 可配置跳动方向 */
}
100% {
transform: translate(0px, 0px);/*结束位置*/
}
}
</style>
多重移动
这里就不帖详细代码了,总之多重移动就是多创建一个动作函数并用新的class绑定这个函数,通过js代码来控制元素的class即可。
完!
版权声明:本文为jxysgzs原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。