<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
<style>
body{background:#000;}
.container{
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
@keyframes round{
15%{opacity:1;}
25%{opacity:1;}
40%{opacity:0;}
}
.container:hover .photo{
animation-play-state:paused;
}
img:nth-child(1){animation-delay:0s;}
img:nth-child(2){animation-delay:4s;}
img:nth-child(3){animation-delay:8s;}
img:nth-child(4){animation-delay:12s;}
</style>
分享到:
相关推荐
纯CSS3代码实现图片轮播slider.rar
CSS3-Slider是一款简单的带5种动画过渡效果的纯CSS3幻灯片特效。该幻灯片使用纯CSS3制作,使用非常简单,只需要按指定的格式编写HTML代码,并引入相应的CSS文件即可正常工作。
这是一款使用纯CSS制作的炫酷轮播图特效。该轮播图特效使用纯CSS3制作,无js。带有前后导航按钮和分页导航按钮。轮播图的内容可以是图片或文字。 使用方法 在页面中引入csslider.default.css文件。
CSS3Slider 仅使用css3过渡创建简单的水平滑块 为什么要使用它? 简单的水平滑块是一种众所周知的模式,可以在数千个网站上以各种方式观察到。 有很多框架可以提供各种滑块体验,但是其中大多数都非常肿,并且提供...
CSS3图片全屏显示是一款css3实现图片全屏显示slider特效。
CSS3图片全屏显示特效是一款css3实现图片全屏显示slider特效。 CSS3图片全屏显示特效图:
3D-Flip-Slider是一款纯JS和CSS3超酷3D翻转式幻灯片插件。该幻灯片在点击前后按钮时,图片或幻灯片内容以3D翻转的方式进行切换。
3D图片Slider轮播特效.rar
css3-image-slider-icon.zip
css3-responsive-slider-menu.zip
jquery-css3-3d-image-slider.zip
slider图片轮播
CSS 3 implementation imitation Chrome style slider "slider" special effects
今天我们要给大家介绍一款相对比较实用的jQuery焦点图插件,这款焦点图插件的特点有2个,一个是每一张图片都有一个同比例尺寸的缩略图,所有缩略图都排列在下方,点击缩略图即可切换到对应的图片;另外一个特点是...
slider 图片展示效果,图片轮播,不错的效果
slider图片滚动展示jQuery代码
#Pure响应式CSS3滑块###无JavaScript的纯响应式CSS3滑块 您可以在此处查看演示
滑杆 这是仅使用html CSS的Slider
simple-HTML-CSS_Slider 使用纯HTML和CSS构建的简单Slider
提到slider,过去一直都是用css+js来配合实现相关的切换效果。听过大家一直讨论使用html5+css3的实现方式,自己却一直没有动手实现过。好吧,这次我有时间来玩下css3了,感兴趣的朋友可以了解下哦