纯css制作电闪雷鸣的天气图标

来源:http://www.chinese-glasses.com 作者:Web前端 人气:187 发布时间:2020-04-29
摘要:效果图如下 1、定义父容器样式,控制图标位置,顺便给整个页面加个背景色,方便预览 实现思路使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案after伪元素写下

效果图如下

1、定义父容器样式,控制图标位置,顺便给整个页面加个背景色,方便预览

实现思路使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案after伪元素写下面的投影样式before伪元素写黄色闪电的样式dom结构

.rainbow::after{ content: ''; width: 120px; height: 15px; position: absolute; bottom: -23px; left: 17px; background: #000; border-radius: 50%; opacity: 0.2; animation: rainbow_shadow 5s ease-in-out infinite; transform: rotate(-40deg); transform-origin: 50% 50%;}@keyframes rainbow_shadow{ 50%{ transform: rotate(-50deg) translate(10px) scale(0.7); opacity: 0.05; }}
div  div /div/div
.rainbow{ width: 70px; height: 70px; position: absolute; top: 70px; left: 80px; margin-left: -40px; border-radius: 170px 0 0 0; box-shadow: #fb323c -2px -2px 0 1px, #f99716 -4px -4px 0 3px, #fee124 -6px -6px 0 5px, #afde2e -8px -8px 0 7px, #6ad7f8 -10px -10px 0 9px, #60b1f5 -12px -12px 0 11px, #a3459b -14px -14px 0 13px; animation: rainbow 5s ease-in-out infinite; transform: rotate(40deg);}@keyframes rainbow{ 50%{ transform: rotate(50deg); }}

OK,搞定。按着步骤来,你也可以在你的页面上实现酷炫的电闪雷鸣天气图标咯~

实现思路使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起after伪元素写投影样式彩虹和投影都有动画dom结构

原文:

搞定,很简单有没有,跟着实现一遍,你也可以画出美丽的彩虹咯~

2、写乌云的样式,别忘了乌云有一个上下移动的动画效果

3、投影样式,别忘了是同样有动画的哟

3、阴影样式,同样是有动画的

css样式

.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; }}

效果图如下

css按照步骤来实现

body{ background: rgba(73,74,95,1);}.container{ width: 170px; height: 170px; position: relative; margin: 250px auto;}

本文由10bet发布于Web前端,转载请注明出处:纯css制作电闪雷鸣的天气图标

关键词:

最火资讯