box-shadow实现云雨图

最新推荐文章于 2024-01-23 16:09:42 发布

Stackll

最新推荐文章于 2024-01-23 16:09:42 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css 奇淫技巧

本文链接：https://blog.csdn.net/qq_38340907/article/details/83897372

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

还是老规矩，先上效果图。
在这里插入图片描述
猜猜用了几个div，其实只写了一个。

样式：

    <style>
        body {
            background-color: #333;
        }
        .cloud {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 100px auto 0;
            background-color: #999;
            border-radius: 50%;
            box-shadow:
                50px 35px 0 1px #999,
                95px 25px 0 1px #999,
                110px -30px 0 1px #999,
                40px -50px 0 1px #999,
                140px 10px 0 1px #999;
        }
        .cloud:after {
            content: "";
            position: absolute;
            left: 50px;
            top: 150px;
            width: 2px;
            height: 20px;
            background-color: blue;
            box-shadow:
                20px 9px 0 0 blue,
                40px 15px 0 0 blue,
                60px 15px 0 0 blue,
                80px 5px 0 0 blue,
                100px 5px 0 0 blue,
                120px 5px 0 0 blue,
                20px 40px 0 0 blue,
                40px 45px 0 0 blue,
                60px 50px 0 0 blue,
                80px 45px 0 0 blue,
                100px 40px 0 0 blue,
                120px 45px 0 0 blue,
                140px 40px 0 0 blue;
        }
    </style>

原理是，利用div本身的阴影进行位移调整实现云朵，利用其伪元素的阴影实现雨点。
而云朵是由多个圆形图案组合而成，雨点则是小矩形。