纯CSS3实现的蓝天白云效果

最新推荐文章于 2024-05-17 10:47:26 发布

frank201113

最新推荐文章于 2024-05-17 10:47:26 发布

阅读量3k

点赞数 3

分类专栏： frontend 文章标签： css3

本文链接：https://blog.csdn.net/Handsome_fan/article/details/73555451

版权

纯CSS3实现的蓝天白云效果

今天我使用了CSS3新增的属性border-radius、linear-gradient、scale(缩放)和一些布局技巧实现了蓝天白云的效果。其HTML结构如下：

<div class="container">
    <div class="blueSky">
        <div class="cloud1"></div>
        <div class="cloud2"></div>
        <div class="cloud3"></div>
        <div class="cloud4"></div>
        <div class="cloud5"></div>
    </div>
    <div class="grassLand"></div>
</div>