广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

运用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情景动漫时,箭头符号不断左右颤动来正确引导客户左右拖动全部网页页面的实际效果编码了。



新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系