主页 > 网页设计 >

纯CSS实现带动画的天气图标

CSS3动画属性并不是许多,但重点实在是你怎么去应用它,从简略的hover状况或庞杂的小动画,都能够奇妙的用CSS3动画属性来实现。

今天重要是跟 大家分享一个比拟有创意、适用的CSS气象图标动画,静态的气象图标看上去是很死板,若加上动画,看起来会更加实在活泼,以下例子就是很好的参考案例。

纯CSS实现带动画的天气图标

下面咱们来做一个会下雨的气象图标实例,进程实在很简略哦。

纯CSS实现带动画的天气图标

STEP1: 整体HTML架构

<divclass="iconrainy"><divclass="cloud"></div><divclass="rain"></div></div>

STEP2: 用CSS绘制云朵图标

CSS代码如下

body{max-width:42em;padding:2em;margin:0auto;color:#161616;font-family:'Roboto',sans-serif;text-align:center;background-color:currentColor;}.icon{position:relative;display:inline-block;width:12em;height:10em;font-size:1em;/*controliconsizehere*/}.cloud{position:absolute;z-index:1;top:50%;left:50%;width:3.6875em;height:3.6875em;margin:-1.84375em;background:currentColor;border-radius:50%;box-shadow:-2.1875em0.6875em0-0.6875em,2.0625em0.9375em0-0.9375em,0000.375em#fff,-2.1875em0.6875em0-0.3125em#fff,2.0625em0.9375em0-0.5625em#fff;}.cloud:after{content:'';position:absolute;bottom:0;left:-0.5em;display:block;width:4.5625em;height:1em;background:currentColor;box-shadow:00.4375em0-0.0625em#fff;}.cloud:nth-child(2){z-index:0;background:#fff;box-shadow:-2.1875em0.6875em0-0.6875em#fff,2.0625em0.9375em0-0.9375em#fff,0000.375em#fff,-2.1875em0.6875em0-0.3125em#fff,2.0625em0.9375em0-0.5625em#fff;opacity:0.3;transform:scale(0.5)translate(6em,-3em);animation:cloud4slinearinfinite;}.cloud:nth-child(2):after{background:#fff;}.rain{position:absolute;z-index:2;top:50%;left:50%;width:3.75em;height:3.75em;margin:0.375em00-2em;background:currentColor;}.rain:after{content:'';position:absolute;z-index:2;top:50%;left:50%;width:1.125em;height:1.125em;margin:-1em00-0.25em;background:#0cf;border-radius:100%060%50%/60%0100%50%;box-shadow:0.625em0.875em0-0.125emrgba(255,255,255,0.2),-0.875em1.125em0-0.125emrgba(255,255,255,0.2),-1.375em-0.125em0rgba(255,255,255,0.2);transform:rotate(-28deg);animation:rain3slinearinfinite;/*设置动画rain*/}

STEP3: 下雨动画

/*下雨动画Animations*/@keyframesrain{0%{background:#0cf;box-shadow:0.625em0.875em0-0.125emrgba(255,255,255,0.2),-0.875em1.125em0-0.125emrgba(255,255,255,0.2),-1.375em-0.125em0#0cf;}25%{box-shadow:0.625em0.875em0-0.125emrgba(255,255,255,0.2),-0.875em1.125em0-0.125em#0cf,-1.375em-0.125em0rgba(255,255,255,0.2);}50%{background:rgba(255,255,255,0.3);box-shadow:0.625em0.875em0-0.125em#0cf,-0.875em1.125em0-0.125emrgba(255,255,255,0.2),-1.375em-0.125em0rgba(255,255,255,0.2);}100%{box-shadow:0.625em0.875em0-0.125emrgba(255,255,255,0.2),-0.875em1.125em0-0.125emrgba(255,255,255,0.2),-1.375em-0.125em0#0cf;}}

最图后果:

纯CSS实现带动画的天气图标