純CSS實現圖片輪播
阿新 • • 發佈：2019-02-06
原文：http://www.aichengxu.com/view/4182590
關鍵點：利用keyframes 原理：infinite
注意點：在處理關鍵幀動畫的時候，注意處理好 總共花費的 animation-duration：time 與每幀延延遲的時間的交錯；要讓動畫顯得層次感，處理好 每幀的延遲時間；
多注意時間的穿插 ；效果更很好；下面只是我的小插圖；畫的不一定對;
以下是我的程式碼；有興趣拷貝來看看，僅作為我的練習記錄；關鍵幀要相容其他瀏覽器，自行補充字首即可；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>純css輪播圖</title>
</head>
<body>
<style>
*{ margin:0 ; padding:0}
ul,li{ list-style:none; margin:0; padding:0;}
.box,
.box:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.box:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.box li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none; background-color:#333;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 18s linear infinite 0s;
-moz-animation: imageAnimation 18s linear infinite 0s;
-o-animation: imageAnimation 18s linear infinite 0s;
-ms-animation: imageAnimation 18s linear infinite 0s;
animation: imageAnimation 18s linear infinite 0s;
}
.box li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 18s linear infinite 0s;
-moz-animation: titleAnimation 18s linear infinite 0s;
-o-animation: titleAnimation 18s linear infinite 0s;
-ms-animation: titleAnimation 18s linear infinite 0s;
animation: titleAnimation 18s linear infinite 0s;
}
.box li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(255,255,255,0.8);
}
.box li:nth-child(1) span { background-image: url(../images/love5.jpg) }
.box li:nth-child(2) span {
background-image: url(../images/love3.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.box li:nth-child(3) span {
background-image: url(../images/love1.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.box li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.box li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
11% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-webkit-transform: scale(1.1);
}
35% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ; -webkit-transform: scale(1.1) translateY(-100%);}
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
11% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-moz-transform: scale(1.1);
}
35% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ; -moz-transform: scale(1.1) translateY(-100%);}
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
11% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
30% {
opacity: 1;
transform: scale(1.1);
}
35% {
opacity: 0;
transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ; transform: scale(1.1) translateY(-100%);}
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
8% {
opacity: 1;
-webkit-transform: translateY(0%);
}
22% {
opacity: 1;
-webkit-transform: translateY(0%);
}
28% {
opacity: 0;
-webkit-transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(-300%);
}
8% {
opacity: 1;
-moz-transform: translateY(0%);
}
22% {
opacity: 1;
-moz-transform: translateY(0%);
}
28% {
opacity: 0;
-moz-transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
22% {
opacity: 1;
transform: translateY(0%);
}
28% {
opacity: 0;
transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .box li span{
opacity: 1;
}
</style>
<ul class="box">
<li><span>Image 01</span><div class="title"><h3>第1張</h3></div></li>
<li><span>Image 02</span><div class="title"><h3>第2張</h3></div></li>
<li><span>Image 03</span><div class="title"><h3>第3張</h3></div></li>
</ul>
</body>
</html>
其他：
