|
css3无缝滚动效果
<!doctype html>
<html lang="en"> <head> <!--声明当前页面的编码格式 UTF-8（国际编码）gbk(中文简体)--> <meta charset="UTF-8"> <!--声明当前页面的三要素--> <title>标题</title> <meta name="Keywords" content="关键字"> <meta name="Description" content="描述"> <!--样式 css 变漂亮 衣柜--> <style type="text/css"> *{margin:0px; padding:0px;}/* *在此位置是通配符，代表所有的标签 margin外边距 padding内边距*/ body{background:#ffb66c;/*背景颜色*/}/*样式控制*/ div{width:960px;/*宽度 px 像素*/ height:270px; /*高度*/ border:10px solid #ff66ff; /*边框*/ margin:120px auto;/*让盒子水平居中*/ border-radius:32px;/*css3 圆角*/ box-shadow:2px 2px 15px #000000;/*css3阴影*/ position:relative; overflow:hidden; /*强制隐藏*/} ul{width:3480px; position:absolute;/*定位*/ top:0px; animation:mylist 16s linear infinite;} ul li{list-style:none;/*去除小黑点*/width:230px; height:270px; background:#00ff66; float:left;/*浮动 并排展示*/ margin:0px 5px;} ul:hover{animation-play-state:paused; /*动画暂停*/cursor:pointer; /*鼠标的样子*/} ul li:hover img{transform:scale(0.8);/*css3图片等比例缩放*/} /*通过@Keyfeames 规则，创建动画*/ @keyframes mylist{ from{left:0px;}/* 从 开始*/ to{left:-1920px;}/* 去 结束*/ } </style> </head> <body> <!--div 盒子模型 容器 --> <div> <!--无序列表 --> <ul> <!--第一列滚动 --> <!--插入图片 img +图片地址--> <li><img src="img/1.jpg"/> </li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> <li><img src="img/5.jpg"/></li> <li><img src="img/6.jpg"/></li> <li><img src="img/7.jpg"/></li> <li><img src="img/8.jpg"/></li> <!--第二列滚动 --> <li><img src="img/1.jpg"/> </li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> <li><img src="img/5.jpg"/></li> <li><img src="img/6.jpg"/></li> <li><img src="img/7.jpg"/></li> <li><img src="img/8.jpg"/></li> </ul> </div> </body> </html>      |
扫一扫
11-29
02-14
1074
1074
12-10
1032
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
