| 让ICON生动起来 纯CSS实现带动画的天气图标 | 您所在的位置：网站首页 › 天气icon图标 › 让ICON生动起来 纯CSS实现带动画的天气图标 |
让ICON生动起来 纯CSS实现带动画的天气图标
让ICON生动起来 纯CSS实现带动画的天气图标
1月 20, 2016
发表于: HTML & CSS.
评论 (1)
Sponsor
CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。 今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。
下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。
STEP1: 整体HTML架构 STEP2: 用CSS绘制云朵图标 CSS代码如下 body { max-width: 42em; padding: 2em; margin: 0 auto; 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; /* control icon size here */ } .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.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; } .cloud:after { content: ''; position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff; } .cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; transform: scale(0.5) translate(6em, -3em); animation: cloud 4s linear infinite; } .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.375em 0 0 -2em; background: currentColor; } .rain:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite; /*设置动画 rain */ }STEP3: 下雨动画 /* 下雨动画 Animations */ @keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } }最图效果：
如果想看其它天气动画图标的代码，请查看以下网址。 在线演示地址&源码：http://codepen.io/joshbader/pen/EjXgqr 推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com 交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。 赞助商链接
与 css、CSS3、图标 相关的文章
20个卡通风格的3D职业头像设计，可作头像或UI图标使用
APP设计中的9种图标类型
游戏图标入门—色彩篇（含色彩训练作业）
游戏图标入门——素描篇（含作业）
复古风格的门票、票根图案图标矢量素材（AI）
APP图标的设计原则和设计流程
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
« 16 种更好看的 WEB 默认标准色 colors.css
32个设计师最喜欢使用的英文字体 »
+ 添加评论One Response to “让ICON生动起来 纯CSS实现带动画的天气图标”
竹 - 回复
2016 年 11 月 14 日 下午 6:44
好看 { 发表评论 } 点击这里取消回复。 推荐书籍
艺术的故事艺术与审美入门之书
DON'T MAKE ME THINK设计师必看
《移动应用UI设计模式》手机APP设计
《设计心理学 全四册》高阶技能！
JavaScript权威指南(第5版)只能说牛X
《见微知著》Web用户体验入门书籍
最新文章
UI设计如何做走查？详细UI走查流程和步骤在这里了
多人物海报设计教程，揭秘人物海报的制作技巧
新兴的烘焙品牌设计，看看烘焙设计师的设计想法
提升用户体验感的12个WEB登录页面设计
第十届成都创意设计周即将启幕，11月9日我们不见不散！
ChatGPT + XMind：打造你的AI思维导图
大神推荐
免费字体库
PS/C4D/版式教程
设计导航
100本设计书籍PDF
原型设计神器
设计接单
标签AI教程
banner
CSS3
dribbble
illustrator教程
jQuery
logo
Mockup
photoshop
photoshop教程
UE
UI
UI KIT
UI素材
UI设计
UX
中文字体
创意
创意设计
图标
字体
字体设计
工具
平面设计
排版
插画
插画教程
摄影
海报
海报设计
海报设计教程
版式设计
用户体验
笔刷
纹理
网页素材
网页设计
色彩搭配
色彩理论
英文字体
设计师
设计理论
设计趋势
设计风格
配色
赞助商
|
【本文地址】
公司简介
联系我们