CSS3提供了豐富的特效和效果,其中白云效果是其中之一。通過實現(xiàn)白云效果,網(wǎng)站可以更加生動有趣。以下是實現(xiàn)白云效果的示例代碼。
.cloud { width: 100px; height: 60px; border-radius: 50px; background-color: #fff; position: relative; transform: rotate(-45deg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .cloud:before, .cloud:after { content: ""; position: absolute; background-color: #fff; border-radius: 50px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .cloud:before { width: 40px; height: 40px; top: -20px; left: 10px; } .cloud:after { width: 60px; height: 60px; top: -20px; right: 0; } .cloud >div { position: absolute; bottom: 0; height: 15px; width: 100%; background-color: #fff; border-radius: 0 0 50px 50px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
代碼中使用了偽元素:before和:after來實現(xiàn)白云的兩個凸起部分,利用box-shadow屬性來實現(xiàn)立體感,利用border-radius屬性來實現(xiàn)天空部分的圓形效果。
同時,實現(xiàn)白云動態(tài)移動效果可以通過CSS的@keyframes和animation屬性來實現(xiàn)。以下是示例代碼:
@keyframes move { 0%{ transform: translateX(0px); } 100%{ transform: translateX(200px); opacity: 0; } } .cloud { animation: move 2s linear infinite; }
通過@keyframes來定義白云移動時的動畫,定義好后再在.cloud類中使用animation屬性來實現(xiàn)動畫。這樣就能實現(xiàn)一個完整的白云效果。
上一篇php 7.1 特性