运用css动漫使某一原素div完成左右颤动
日期：2021-04-04 浏览：
大家再制作网页时，常常见面到banner图上边有一个相近电脑鼠标的小标志，这一小标志假如是静态数据的，客户感受感就受到非常大影响了，那麼怎样完成使他能够左右波动呢？
!DOCTYPE html
html
head
meta http-equiv= Content-Type content= text/html; charset=utf-8 /
title css动漫--原素左右颤动 /title
style type= text/css
@-webkit-keyframes bounce-down {
25% {-webkit-transform: translateY(-10px);}
50%, 100% {-webkit-transform: translateY(0);}
75% {-webkit-transform: translateY(10px);}
}
@keyframes bounce-down {
25% {transform: translateY(-10px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(10px);}
}
.animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;
}
@-webkit-keyframes bounce-up {
25% {-webkit-transform: translateY(10px);}
50%, 100% {-webkit-transform: translateY(0);}
75% {-webkit-transform: translateY(-10px);}
}
@keyframes bounce-up {
25% {transform: translateY(10px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(-10px);}
}
.animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}
/style
/head
body
div >
之上便是在H5情景动漫时，箭头符号不断左右颤动来正确引导客户左右拖动全部网页页面的实际效果编码了。
全国热线：18720358503
传真热线：18720358503
Q Q咨询：2639601583
企业邮箱：