本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!
博客地址 点击跳转
< ! ---------- 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{
/*注意点: 动画添加给谁就让谁暂停*/
animation-play-state: paused;
}
.father ul:hover li{
opacity: 0.3;
}
.father ul li:hover{
opacity: 1;
}
</style>
< ! --------- 效果展示 ---------- >
**CSS3-无限轮播**
