纯css实现轮播效果
来源:互联网 发布:linux 挂载u盘 fat32 编辑:程序博客网 时间:2024/05/20 21:20
转载自: http://blog.csdn.net/rtian001/article/details/48474677#comments
改动了一部分 方便自己以后使用
<!DOCTYPE html><html><head> <title> 纯CSS代码实现图片轮播 </title> <meta charset="utf-8" /> <style type="text/css"> #frame {/*----------图片轮播相框容器----------*/ position:absolute;width:300px; height:200px;overflow:hidden;border-radius:5px;} #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/ position:absolute;z-index:9;width:calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/} #photos img { float:left;width:300px;height:200px;} .play{ animation:ma 20s ease-out infinite alternate;/**/ } @keyframes ma {/*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/ 0%,20% {margin-left:0; } 25%,40% {margin-left:-300px;} 45%,60% {margin-left:-600px;} 65%,80% {margin-left:-900px;} 85%,100% {margin-left:-1200px;} } .num{ position:absolute;z-index:10;display:inline-block;right:10px;top:165px;border-radius:100%; background:#f00;width:25px;height:25px;line-height:25px;cursor:pointer;color:#fff; text-align:center;opacity:0.8;} .num:hover{background:#00f;} .num:hover,#photos:hover{animation-play-state:paused;} .num:nth-child(4){margin-right:30px} .num:nth-child(3){margin-right:60px} .num:nth-child(2){margin-right:90px} .num:nth-child(1){margin-right:120px} #a1:hover ~ #photos{animation:ma1 .5s ease-out forwards;} #a2:hover ~ #photos{animation:ma2 .5s ease-out forwards;} #a3:hover ~ #photos{animation:ma3 .5s ease-out forwards;} #a4:hover ~ #photos{animation:ma4 .5s ease-out forwards;} #a5:hover ~ #photos {animation:ma5 .5s ease-out forwards;} @keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:0;} } @keyframes ma2 {0%{margin-left:0;}100%{margin-left:-300px;} } @keyframes ma3 {0%{margin-left:-300px;}100%{margin-left:-600px;} } @keyframes ma4 {0%{margin-left:-600px;}100%{margin-left:-900px;} } @keyframes ma5 {0%{margin-left:-900px;}100%{margin-left:-1200px;} } </style></head><body><div id="frame" > <a id="a1" class="num">1</a> <a id="a2" class="num">2</a> <a id="a3" class="num">3</a> <a id="a4" class="num">4</a> <a id="a5" class="num">5</a> <div id="photos" class="play"> <img src="http://eduppp.cn/images/0/1.jpg" > <img src="http://eduppp.cn/images/0/3.jpg" > <img src="http://eduppp.cn/images/0/4.jpg" > <img src="http://eduppp.cn/images/0/5.jpg" > <img src="http://eduppp.cn/images/0/2.jpg" > </div></div></body></html>
1 0
- 纯css实现轮播效果
- 纯css实现幻灯片轮播效果
- +【CSS3】使用纯css代码实现图片轮播效果
- 纯CSS实现图片轮播
- 浅谈纯CSS实现轮播
- CSS实现3D轮播效果
- HTML+CSS+JS实现轮播效果
- 纯原生javascript实现图片轮播切换效果代码。
- 图片轮播--纯css
- 纯CSS实现简易轮播(一)
- 纯CSS实现翻页效果
- 纯CSS实现手风琴效果
- 纯CSS实现手风琴效果
- 纯css实现粒子效果
- 纯css实现阴影效果
- 纯css 实现tab效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- hibernate 出现Caused by: java.sql.SQLException: Column 'id' not found.异常
- leetcode:数学:Rectangle Area(223)
- 最全web前端资料整理
- windows10 vs2015编译 带nginx-rtmp-module 模块的32位nginx
- PHP命名空间(Namespace)的使用详解副本
- 纯css实现轮播效果
- Python模块之pickle
- C语言第一章
- Apache Commons
- Python设计模式(十七)【观察者模式】
- C++中的RTTI
- 简单选择排序
- 这些自媒体平台可以帮你实现大目标
- Linux基本操作命令