CSS3 animation如何实现简易幻灯片轮播特效

发布时间：2023-01-01 12:49:27 来源：网络

.

果然，过了一会儿，在那个地方出现了太阳的小半边脸，红是红得很，却没有亮光。太阳像负着什么重担似的，慢慢儿，一纵一纵地，使劲儿向上升。

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如何实现简易幻灯片轮播特效内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： animation