色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

圖片環形滾動css特效

林雅南2年前8瀏覽0評論

在網頁設計中,有很多插件和特效可以為網站增添更多的亮點和趣味。其中,圖片環形滾動css特效就是一種非常常見的網頁特效,它可以通過css代碼實現,為網頁增加一些動感和視覺效果。

<div class="circle-scroll">
<ul>
<li><img src="圖片1.jpg" alt=""></li>
<li><img src="圖片2.jpg" alt=""></li>
<li><img src="圖片3.jpg" alt=""></li>
<li><img src="圖片4.jpg" alt=""></li>
<li><img src="圖片5.jpg" alt=""></li>
</ul>
</div>
<style>
.circle-scroll {
width: 600px;
height: 600px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.circle-scroll ul {
list-style: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-wrap: nowrap;
animation: circleScroll 20s linear infinite;
}
.circle-scroll ul li {
width: 100%;
height: 100%;
margin-right: 50px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
transform-origin: center center -50px;
transform-style: preserve-3d;
animation: circleScrollItem 20s linear infinite;
}
.circle-scroll ul li:last-child {
margin-right: 0;
}
.circle-scroll ul li img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes circleScroll {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes circleScrollItem {
0% {
transform: rotateY(0deg) translateZ(-300px);
}
100% {
transform: rotateY(360deg) translateZ(-300px);
}
}
</style>

在上面的代碼中,我們先創建了一個div元素,將其中的圖片通過ul和li標簽呈現為一個圖片環,使用css樣式進行美化。其中,我們需要用到許多css屬性,包括transform,animation等。通過這些屬性的使用,我們能夠實現環形滾動的效果。

最終,我們就能夠實現一個類似于下面這樣的環形滾動圖片特效:

環形滾動特效