CSS3: animation实现简易幻灯片(轮播)
2016-05-12 15:01
721 查看
前言
CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)
效果图
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3幻灯片</title> <style type="text/css" media="screen"> .items { width: 280px; height: 150px; border: 1px solid #ddd; box-sizing: border-box; border-radius:10px; background-size: cover; -webkit-transform: translateZ(0); transform: translateZ(0); background-repeat: no-repeat; -webkit-animation: slider 15s linear infinite alternate; animation: slider 15s linear infinite alternate; -webkit-transform-origin: center center; transform-origin: center center; } @-webkit-keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } @keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } </style> </head> <body> <div class="slider"> <div class="items"></div> </div> </body> </html>
相关文章推荐
- css的边框属性
- CSS3-字体样式
- 个人CSS问题的记录
- css3之3d导航
- input样式为横线
- 几个CSS3的flex弹性盒模型布局的简单例子演示
- CSS3中的transform属性进行2D和3D变换的基本用法
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
- getStyle(obj, attr)兼容获取css
- 实现将一个List转化为Map的样式
- 实现将一个List转化为Map<Key,List>的样式
- 一些简单而又不失个性的css3片段(持续更新)
- 创建 StyledMapType 地图样式
- CSS之悬浮float:right/left
- CSS中zoom:1的作用 ,小标签大作用
- CSS布局 -- 圣杯布局 & 双飞翼布局
- 织梦channel标签currentstyle样式无效不起作用的解决办法
- 网页设计的12个轻量CSS框架
- 重置样式表
- css3 画几何图形之三角形--随笔