CSS3云朵動畫是一種流行的CSS動畫效果,可以增強網(wǎng)頁的視覺效果,使網(wǎng)站變得更具吸引力。此動畫的特點是用CSS3實現(xiàn)云朵的浮動和旋轉,使云朵仿佛在飄動。
.cloud { position: absolute; width: 120px; height: 60px; background: #fff; border-radius: 50%; animation: floating 4s ease-in-out infinite; box-shadow: -10px -2px 22px rgba(255, 255, 255, 0.2), 10px 2px 22px rgba(0, 0, 0, 0.1); } @keyframes floating { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, 0); } } .cloud:before, .cloud:after { content: ""; position: absolute; background: #fff; transform: rotate(45deg); } .cloud:before { top: -28px; left: 10px; width: 60px; height: 60px; border-radius: 0 50% 0 0; } .cloud:after { bottom: -15px; right: -30px; width: 90px; height: 90px; border-radius: 50%; } @media (max-width: 560px) { .cloud { width: 80px; height: 40px; } }
以上是CSS3云朵動畫的代碼,通過調整其中的參數(shù)可以使云朵動畫更加流暢和自然。當然,為了使整個頁面呈現(xiàn)出更好的效果,我們還可以在其他元素中使用相似的CSS3動畫效果。
CSS3云朵動畫是一種較為簡單易用的動畫效果,適用于各種類型的網(wǎng)站。通過在網(wǎng)站上添加這種動態(tài)效果,可以為網(wǎng)站增加趣味性,吸引更多的訪問者。