通过box-shadow完成云朵形状的原理,麻烦讲一下

来源:2-14 项目作业

慕婉清6323512

2020-08-22 15:02:48


.cloud1{

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: #fff;

            box-shadow:  24px -14px 0 -3px #fff,

             64px -12px 0 10px #fff,

             30px 10px #fff,

             60px 15px 0 -10px #fff,

             85px 5px 0 -5px #fff;

             position: absolute;

             top: 30px;

             left: 100%;

             animation: translate var(--tim) linear infinite;

             opacity: 1;


写回答

1回答

好帮手慕久久

2020-08-22

同学你好,白云的形成无法通过box-shadow很好的完成,box-shadow是设置元素阴影。白云可以通过设置圆角(border-radius),然后使用三个元素拼接而成,如下:

http://img.mukewang.com/climg/5f40e9b009167b7108360411.jpg

代码可参考如下:

http://img.mukewang.com/climg/5f40ea450954c42204380593.jpg

http://img.mukewang.com/climg/5f40ea48092c007103570200.jpg

http://img.mukewang.com/climg/5f40ea4c098d283004260092.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

0

0 学习 · 40143 问题

查看课程