果然，过了一会儿，在那个地方出现了太阳的小半边脸，红是红得很，却没有亮光。太阳像负着什么重担似的，慢慢儿，一纵一纵地，使劲儿向上升。
CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;
但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)
效果图
代码
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>
到此这篇关于CSS3 animation如何实现简易幻灯片轮播特效就介绍到这了。做人，虚心若竹，始终谦逊、矜持；傲骨像梅花，保持清雅，凛然。旁人怎么看待，那是别人的事情，人无需自卑，亦不能自负，一定要努力做最好的自己。更多相关CSS3 animation如何实现简易幻灯片轮播特效内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
