欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css時間軸特效3D

劉柏宏2年前10瀏覽0評論

CSS時間軸特效3D是一種非常流行的網頁設計效果,它能夠將頁面中的內容以時間的順序展示出來,為用戶提供更好的閱讀體驗。

/* CSS代碼 */
.timeline {
position: relative;
}
.timeline li {
position: relative;
padding: 30px 0;
}
.timeline li::before {
position: absolute;
content: '';
top: 0;
left: 50%;
margin-left: -2px;
height: 100%;
border-left: 2px solid #ccc;
z-index: -1;
transform: rotateY(90deg);
}
.timeline li::after {
position: absolute;
content: '';
top: 15px;
left: 50%;
margin-left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #ccc;
z-index: 1;
}
.timeline li:hover::after {
background-color: #ccc;
}
.timeline li:first-child::before {
top: 50%;
height: 50%;
}
.timeline li:last-child::before {
height: 50%;
}
.timeline li:nth-child(odd) {
left: 15%;
}
.timeline li:nth-child(even) {
left: 60%;
}
.timeline li:nth-child(odd)::before,
.timeline li:nth-child(even)::before {
height: 100%;
}
.timeline li:nth-child(odd)::after {
transform: translateX(50%) rotateZ(45deg);
}
.timeline li:nth-child(even)::after {
transform: translateX(-50%) rotateZ(-45deg);
}

以上是CSS樣式代碼,使用這樣的代碼可以將時間軸特效3D效果應用到頁面中,為網站增加更為生動的展示效果,并且能夠讓用戶更容易地看到和閱讀網站內容。