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效果應用到頁面中,為網站增加更為生動的展示效果,并且能夠讓用戶更容易地看到和閱讀網站內容。
上一篇dw在類內嵌css
下一篇dw外聯式css怎么寫