色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3云朵動畫

王梓涵1年前8瀏覽0評論

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)站增加趣味性,吸引更多的訪問者。

上一篇nikita php