CSS3有很多很強大的特性,其中之一就是噴泉效果。這種效果可以很好的展示我們網站的創意和藝術性,讓我們的頁面更有吸引力。以下是一個CSS3噴泉特效的示例:
.fountain { position: relative; width: 400px; height: 400px; margin: 50px auto; overflow: hidden; } .fountain:before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-style: solid; border-width: 0 100px 200px 100px; border-color: transparent transparent #fff transparent; transform: translateX(-50%); animation: fountain 2s infinite; } @keyframes fountain { 0% { transform: translate(-50%, -200px); opacity: 1; } 50% { transform: translate(-50%, 200px); opacity: 0.5; } 100% { transform: translate(-50%, -200px); opacity: 1; } }
這段CSS代碼創建了一個名為fountain的class,其中包含一個偽元素:before。在這個偽元素中,我們定義了一個三角形的形狀,并通過border-width和border-color屬性進行控制。使用transform屬性和animation屬性,我們實現了一個運動效果。
此示例僅僅是一個簡單的例子,您可以根據自己的需求進行更多的探索和擴展。基于CSS3的噴泉效果不僅能夠展現您的設計和創意,也可以讓您的網站更加吸引人。
上一篇css3商品列表顯示
下一篇css ol跟ul重疊了