传奇背景图网站怎么做,企业为什么要建站,服务器维护公告,福州帮人建网站公司用H5实现图片滚动显示像跑马灯一样的效果。
程序详解#xff1a; 图片滚动的开始和停止 鼠标的放上和移走事件 无限循环 每次滚动速度的快慢
效果演示#xff08;图片自右向左滚动#xff09; 代码演示
!DOCTYPE html
htmlheadmeta charset 图片滚动的开始和停止 鼠标的放上和移走事件 无限循环 每次滚动速度的快慢
效果演示图片自右向左滚动 代码演示
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headstylestyle*{padding: 0;margin: 0;}img{width: auto;height: 180px;}div{width: 1500px;height: 180px;margin: 100px auto;background-color: blanchedalmond;overflow: hidden;}div ul{width: 200%;list-style: none;animation-name: move;/*速度*/animation-duration: 9s;/*无限循环*/animation-iteration-count: infinite;/*时间函数*/animation-timing-function: linear;}div ul li{width: auto;float: left;}div ul li img{height: 100%;}/*鼠标上移停止动画*/div:hover ul{/*修改鼠标样式*/cursor: pointer;/*暂停*/animation-play-state: paused;}/*开始动画*/keyframes move {from{transform: translateX(0);}to{transform: translateX(-1480px);}}/style/stylebodydivulliimg srcimg/2.jpg alt/liliimg srcimg/4.jpg alt/liliimg srcimg/5.jpg alt/liliimg srcimg/4.jpg alt/liliimg srcimg/2.jpg alt/liliimg srcimg/4.jpg alt/liliimg srcimg/5.jpg alt/liliimg srcimg/2.jpg alt/liliimg srcimg/4.jpg alt/liliimg srcimg/1.png alt/liliimg srcimg/5.jpg alt/liliimg srcimg/3.png alt/liliimg srcimg/2.jpg alt/liliimg srcimg/4.jpg alt/liliimg srcimg/1.png alt/liliimg srcimg/3.png alt/li/ul/div/body
/html
