纯css轮播(焦点)

<prename="code"class="html">&lt;!DOCTYPEhtml&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;飛天网事--纯CSS代码实现图片轮播&lt;/title&gt;

&lt;metacharset="utf-8"/&gt;

&lt;metaname="description"content="飛天网事，WEB前端开发，纯css3代码图片轮播，HTML5+CSS3精彩案例"/&gt;

&lt;metaname="keywords"content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，"/&gt;

&lt;metaname="author"content="R.tian@eduppp.cn2015"&gt;

&lt;linkrel="shortcuticon"href="http://eduppp.cn/images/logo4.gif"/&gt;

&lt;linkrel="apple-touch-icon"href="http://eduppp.cn/images/logo.gif"/&gt;

&lt;styletype="text/css"&gt;

#frame{/*----------图片轮播相框容器----------*/

position:absolute;/*--绝对定位，方便子元素的定位*/

width:300px;

height:200px;

overflow:hidden;/*--相框作用，只显示一个图片---*/

border-radius:5px;

}

#dis{/*--绝对定位方便li图片简介的自动分布定位---*/

position:absolute;

left:-50px;

top:-10px;

opacity:0.5;

}

#disli{

display:inline-block;

width:200px;

height:20px;

margin:050px;

float:left;

text-align:center;

color:#fff;

border-radius:10px;

background:#000;

}

#photosimg{

float:left;

width:300px;

height:200px;

}

#photos{/*---设置总的图片宽度--通过位移来达到轮播效果----*/

position:absolute;z-index:9;

width:calc(300px*5);/*---修改图片数量的话需要修改下面的动画参数*/

}

.play{

animation:ma20sease-outinfinitealternate;/**/

}

@keyframesma{/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/

0%,20%{margin-left:0px;}

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(2){margin-right:30px}

.num:nth-child(3){margin-right:60px}

.num:nth-child(4){margin-right:90px}

.num:nth-child(5){margin-right:120px}

#a1:hover~#photos{animation:ma1.5sease-outforwards;}

#a2:hover~#photos{animation:ma2.5sease-outforwards;}

#a3:hover~#photos{animation:ma3.5sease-outforwards;}

#a4:hover~#photos{animation:ma4.5sease-outforwards;}

#a5:hover~#photos{animation:ma5.5sease-outforwards;}

@keyframesma1{0%{margin-left:-1200px;}100%{margin-left:-0px;}}

@keyframesma2{0%{margin-left:-1200px;}100%{margin-left:-300px;}}

@keyframesma3{100%{margin-left:-600px;}}

@keyframesma4{100%{margin-left:-900px;}}

@keyframesma5{100%{margin-left:-1200px;}}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;divid="frame"&gt;

&lt;aid="a1"class="num"&gt;1&lt;/a&gt;

&lt;aid="a2"class="num"&gt;2&lt;/a&gt;

&lt;aid="a3"class="num"&gt;3&lt;/a&gt;

&lt;aid="a4"class="num"&gt;4&lt;/a&gt;

&lt;aid="a5"class="num"&gt;5&lt;/a&gt;

&lt;divid="photos"class="play"&gt;

&lt;imgsrc="http://eduppp.cn/images/0/1.jpg"&gt;

&lt;imgsrc="http://eduppp.cn/images/0/3.jpg"&gt;

&lt;imgsrc="http://eduppp.cn/images/0/4.jpg"&gt;

&lt;imgsrc="http://eduppp.cn/images/0/5.jpg"&gt;

&lt;imgsrc="http://eduppp.cn/images/0/2.jpg"&gt;

&lt;ulid="dis"&gt;

&lt;li&gt;中国标志性建筑：看看&lt;/li&gt;

&lt;li&gt;中国标志性建筑：信息&lt;/li&gt;

&lt;li&gt;中国标志性建筑：安安&lt;/li&gt;

&lt;li&gt;中国标志性建筑：人人&lt;/li&gt;

&lt;li&gt;中国标志性建筑：引用&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;</pre>

<p></p>

</div>