Css如何制作荷花盛开效果

Css

1.HTMLbox

2.CSS

#box{

width:1000px;

height:800px;

margin:0 auto;

margin-top:50px;

position:relative;

}

.box01,.box02,.box03,.box04,.box05,.box06,.box07,.box08,.box09{

width:300px;

height:300px;

border-radius:300px 0;

background:pink;

opacity:0.6;

position:absolute;

bottom:100px;

left:500px;

transform-origin:0 300px;

transform:rotate(-45deg);

transition:all 8s;

}

3.hover

#box:hover .box01{

transform:rotate(-23deg);

}

#box:hover .box02免费云主机、域名{

transform:rotate(0deg);

}

#box:hover .box03{

transform:rotate(23deg);

}

#box:hover .box04{

transform:rotate(45deg);

}

#box:hover .box06{

transform:rotate(-68deg);

}

#box:hover .box07{

transform:rotate(-90deg);

}

#box:hover .box08{

transform:rotate(-113deg);

}

#box:hover .box09{

transform:rotate(-135deg);

}

Css

相关推荐: 百度搜索地位崩塌，微软Bing和俄罗斯Yandex上升

中国的搜索引擎市场正在发生巨变。据美国一家网站流量检测机构StatCounte显示：从2022年到2023年，百度的搜索流量份额急剧下降至39.64%，而微软的Bing和俄罗斯的Yandex则在这一过程中蓬勃发展，已成为中国排名前两的搜索引擎。 同样，搜狗和3…