CSS圖片輪滑是一種常見的網(wǎng)頁設(shè)計(jì)效果，可以在網(wǎng)頁中對圖片進(jìn)行輪播、滑動(dòng)等動(dòng)態(tài)展示。下面介紹一種基于CSS實(shí)現(xiàn)的圖片輪滑的代碼。
<!DOCTYPE html>
<html>
<head>
<title>圖片輪滑</title>
<style>
.wrapper{
width: 100%;
height: 500px;
overflow: hidden; /* 隱藏超出部分 */
position: relative;
}
.slider{
width: 300%; /* 圖片數(shù)量乘以100% */
height: 500px;
position: absolute;
left: 0;
top: 0;
}
.slider img{
width: 33.333%; /* 圖片數(shù)量乘以33.333% */
height: 500px;
float: left;
}
.slider img:nth-child(1){ /* 默認(rèn)第一張圖片 */
margin-left: 0;
}
.slider img:nth-child(2){
margin-left: -33.333%;
}
.slider img:nth-child(3){
margin-left: -66.666%;
}
@keyframes slide{ /* 定義動(dòng)畫 */
0% {
margin-left: 0;
}
100% {
margin-left: -200%; /* 圖片數(shù)量乘以200% */
}
}
.slider{
animation: slide 8s infinite; /* 動(dòng)畫執(zhí)行時(shí)間為8秒，無限循環(huán) */
animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* 動(dòng)畫速度曲線 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="slider">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
</div>
</div>
</body>
</html>以上代碼中，包含一個(gè)類名為wrapper的div容器和一個(gè)類名為slider的div容器，其中wrapper用于容納slider，設(shè)置其寬度和高度，并隱藏其超出部分，slider用于展示圖片，包含多張圖片并通過CSS的float屬性橫向排列，同時(shí)通過nth-child偽類設(shè)置每一張圖片的margin-left值，使圖片按順序排列，形成輪播效果。最后通過CSS的@keyframes規(guī)則定義動(dòng)畫slide，控制slider在8秒時(shí)間內(nèi)從margin-left為0移動(dòng)到-200%，達(dá)到輪播效果，并通過animation-timing-function屬性設(shè)置動(dòng)畫速度曲線。
總而言之，以上代碼提供了一種簡單、基于CSS的圖片輪播實(shí)現(xiàn)方式，可以方便地應(yīng)用于網(wǎng)頁設(shè)計(jì)中。