CSS3 animation實現簡易幻燈片輪播特效

2024-07-11 08:32:29

字體：大中小

來源：轉載

供稿：網友

CSS3有個別特性,可以觸發硬件GPU來加速渲染,而不是調用默認瀏覽器引擎渲染;

但是很多屬性,默認都是不開啟硬件加速的;需要觸發條件,一個最簡單的觸發條件就是使用3D屬性(對Z軸的操作)

效果圖

代碼

XML/HTML Code復制內容到剪貼板

<!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>