1. 程式人生 > >純CSS實現簡易輪播(一)

純CSS實現簡易輪播(一)

做專案的時候總用別人的輪播外掛,就想著自己能不能做一個輪播,能不能用純CSS做的,然後就在網上查了一下,發現例子還不少,然後看一下別人的,自己照貓畫虎的也來一個試試,很簡單的一個效果,這個的體驗效果不太好,想學習的可以看一下試試

html程式碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/test_5.css">
</head>
<body>
<div id="carousel">
	<ul class="slider">
		<li class="items item_1"><img src="../img/img_14.jpg"><h1>1</h1></li>
		<li class="items item_2"><img src="../img/img_15.jpg"><h1>2</h1></li>
		<li class="items item_3"><img src="../img/img_16.jpg"><h1>3</h1></li>
		<li class="items item_4"><img src="../img/img_17.jpg"><h1>4</h1></li>
		<li class="items item_5"><img src="../img/img_18.jpg"><h1>5</h1></li>
	</ul>
</div>

</body>
</html>


CSS程式碼如下:
*{
    margin:0;
    padding:0;
}
ul,li{
    list-style: none;
}
#carousel{
	width: 600px;
	height: 400px;
	background-color: rgba(255,63,63,.3);
	margin: 20px auto;
}
#carousel .slider{
	padding: 0;
	margin: 0;
	position: relative;
}
#carousel .items{
	width: 100%;
	position: absolute;
	animation: carousel 20s linear infinite;
	
	/* animation: name duration timing-function delay iteration-count direction;
	animation: 繫結到選擇器的keyframe名稱 花費時長 速度曲線 延遲 播放次數 是否反向播放動畫; */
}
#carousel .items+.items:hover{
	animation-play-state: paused;
	-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
#carousel .items img{
	width: 100%;
	height: 100%;
}
#carousel .item_1{
	animation-delay: -1s;
	z-index: -1;
}
#carousel .item_2{
	animation-delay: 3s;
	z-index: -1;
}
#carousel .item_3{
	animation-delay: 7s;
	z-index: -1;
}
#carousel .item_4{
	animation-delay: 11s;
	z-index: -1;
}
#carousel .item_5{
	animation-delay: 15s;
	z-index: -1;
}
#carousel h1{
	position: absolute;
	top: 50px;
	left: 200px;
	background-color: #FF3F3F;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 100%;
	font-size: 40px;
	color: #fff;
	text-align: center;
}
@keyframes carousel{
    0%{
        opacity:0;
        z-index:2;
    }
    5%{
        opacity:1;
        z-index: 1;
    }
    20%{
        opacity:1;
        z-index:1;
    }
    25%{
        opacity:0;
        z-index:0;
    }
    100%{
        opacity:0;
        z-index:-1;
    }
}

/*
css實現暫停
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
*/




效果圖如下: