CSS3 animation实现简易幻灯片轮播特效
CSS3 animation实现简易幻灯片轮播特效
发布时间:2017-01-07 来源:查字典编辑
摘要:CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最...

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;

但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)

效果图

1

代码

XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>CSS3幻灯片</title> <styletype="text/css"media="screen"> .items{ width:280px; height:150px; border:1pxsolid#ddd; box-sizing:border-box; border-radius:10px; background-size:cover; -webkit-transform:translateZ(0); transform:translateZ(0); background-repeat:no-repeat; -webkit-animation:slider15slinearinfinitealternate; animation:slider15slinearinfinitealternate; -webkit-transform-origin:centercenter; transform-origin:centercenter; } @-webkit-keyframesslider{ 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); } } @keyframesslider{ 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> <divclass="slider"> <divclass="items"></div> </div> </body> </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持查字典教程网。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类