本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!!
博客地址 點(diǎn)擊跳轉(zhuǎn)
< ! ---------- HTML ----------- >
<div class="father">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<!--核心代碼-->
<li>
</li>
<li>
</li>
</ul>
</div>
< ! --------- Style --------------- >
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 564px;
height: 265px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
background-color: #000;
}
ul{
width:9999px;
height: 265px;
background-color: black;
animation: sport 6s linear 0s infinite normal;
}
ul li{
list-style: none;
width: 464px;
height: 265px;
background-color: #000;
float: left;
}
@keyframes sport {
from{
transform: translate(0, 0);
}
to{
transform: translate(-1856px, 0);
}
}
.father ul:hover{
/*注意點(diǎn): 動(dòng)畫添加給誰(shuí)就讓誰(shuí)暫停*/
animation-play-state: paused;
}
.father ul:hover li{
opacity: 0.3;
}
.father ul li:hover{
opacity: 1;
}
</style>
< ! --------- 效果展示 ---------- >
**CSS3-無(wú)限輪播**
