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

来源：学路情感网

这篇文章主要为大家详细介绍了CSS3 animation实现简易幻灯片轮播特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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>
 <p class="slider">
 <p class="items"></p>
 </p>
</body>
</html>

显示全文

全部频道

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