效果图如下
实现思路
使用 box-shadow 属性写几个圆, 将这些圆错落的组合在一起, 形成云朵图案
after 伪元素写下面的投影样式
before 伪元素写黄色闪电的样式
dom 结构
用两个嵌套的 div 容器就可以了, 父容器来控制图标显示的位置, 子容器用来写乌云的样式. 而阴影和闪电的样式都用伪元素就可以了, 这些都是在 CSS 中定义的.
- <div class="container">
- <div class="stormy"></div>
- </div>
CSS 样式
CSS 按照步骤来实现
1, 先写父容器样式, 顺便给整个页面加个背景色, 方便预览
- body{
- background: rgba(73,74,95,1);
- }
- .container{
- width: 170px;
- height: 170px;
- position: relative;
- margin: 250px auto;
- }
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
2, 写乌云的样式, 别忘了乌云有一个上下移动的动画效果
- .stormy{
- width: 50px;
- height: 50px;
- position: absolute;
- left: 80px;
- top: 70px;
- margin-left: -60px;
- background: #222;
- border-radius: 50%;
- box-shadow: #222 64px -15px 0 -5px,
- #222 25px -25px,
- #222 30px 10px,
- #222 60px 15px 0 -10px,
- #222 85px 5px 0 -5px;
- animation: stormy 5s ease-in-out infinite;
- }
- @keyframes stormy{
- 50%{
- transform: translateY(-20px);
- }
- }
3, 阴影样式, 同样是有动画的
- .stormy::after{
- content: '';
- width: 120px;
- height: 15px;
- position: absolute;
- left: 5px;
- bottom: -60px;
- background: #000;
- border-radius: 50%;
- opacity: 0.2;
- transform: scale(0.7);
- animation: stormy_shadow 5s ease-in-out infinite;
- }
- @keyframes stormy_shadow{
- 50%{
- transform: translateY(20px) scale(1);
- opacity: 0.05;
- }
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
4, 闪电样式
- .stormy::before{
- display: block;
- content: '';
- width: 0;
- height: 0;
- position: absolute;
- left: 57px;
- top: 70px;
- border-left: 0px solid transparent;
- border-right: 7px solid transparent;
- border-top: 43px solid yellow;
- box-shadow: yellow -7px -32px;
- transform: rotate(14deg);
- transform-origin: 50% -60px;
- animation: stormy_thunder 2s steps(1, end) infinite;
- }
- @keyframes stormy_thunder{
- 0%{
- transform: rotate(20deg);
- opacity: 1;
- }
- 5%{
- transform: rotate(-34deg);
- opacity: 1;
- }
- 10%{
- transform: rotate(0deg);
- opacity: 1;
- }
- 15%{
- transform: rotate(-34deg);
- opacity: 0;
- }
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
OK, 搞定. 按着步骤来, 你也可以在你的页面上实现酷炫的电闪雷鸣天气图标咯~
来源: http://www.jianshu.com/p/e9e11c79579e