html怎么让图标动起来,让ICON生动起来 纯CSS实现带动画的天气图标
让ICON生动起来 纯CSS实现带动画的天气图标
1月 20, 2016
评论 (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;
}
}
最图效果:
如果想看其它天气动画图标的代码,请查看以下网址。
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
竹 -
2016 年 11 月 14 日 下午 6:44
好看
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站
html怎么让图标动起来,让ICON生动起来 纯CSS实现带动画的天气图标相关推荐
- html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
- css3 乌云散去,纯css实现乌云密布的天气图标效果
效果 效果如下 实现思路 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影 增加动画 dom结构 用两个嵌套的div容器,父容器来 ...
- 纯css实现乌云密布的天气图标
效果 效果如下 实现思路 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影 增加动画 dom结构 用两个嵌套的div容器,父容器来 ...
- css 画太阳,纯css写一个大太阳的天气图标
效果 效果图如下 实现思路div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来控 ...
- 纯css实现导航处hot小图标实现
先上效果图: 纯css实现导航处hot小图标实现 css代码: .shop{ position: relative; } .shop a:after{ background-color: red; b ...
- 用HTML+css制作一个动态的天气图标
前言 本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的 一.HTML部分 <!DOCTYPE html& ...
- 小程序中纯CSS实现仿京东小优惠券图标
效果图: image.png 通常情况下可以用图片做背景图实现,但是,背景图如果用png,会出现被拉伸变形的问题,如果用svg会有兼容问题,同时也有被拉伸变形的问题,仔细分析,这个图标其实是一个圆角矩 ...
- css加号图标_手把手教你打造一个纯CSS图标库
来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库: 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/s ...
- html i标签css 图标,ICONO – 仅一个标签实现的纯CSS图标
ICONO – 仅一个标签实现的纯CSS图标 1月 29, 2015 评论 Sponsor 图标在WEB和APP设备上是很常用的设计元素,有些网站为了兼容高分辨率的显视屏,比如苹果Retina设备,一 ...
最新文章
- 虚拟存储:迈向私有云的关键一步
- 当顶流厂商谈论智能手表,他们到底在谈论什么
- 一步步教你如何用别人的无线上网,附带破解软件
- 使用 Arthas 排查 SpringBoot 诡异耗时的 Bug
- 第一次接广告的心得,关于广告我怎么看
- 【天池赛事】零基础入门语义分割-地表建筑物识别 Task1:赛题理解与 baseline
- 【JUC系列】Java的锁机制
- json格式数据,将数据库中查询的结果转换为json, 然后调用接口的方式返回json(方式一)...
- 嵌入式linux h.264,利用ffmpeg来进行视频解码h.264格式(linux)
- Web Api无法访问 404
- vs2019能写Java吗_Visual studio2019打包程序过程
- 输出绝对值(信息学奥赛一本通-T1040)
- 国内首份千款主流安卓应用耗电指标评测报告新鲜出炉!
- 专访勒索组织“范本”:Thedarkoverlord 喜欢并享受辽阔的狩猎场
- [Android]Cygwin使用及NDK编译方法
- Android Spinner –下拉列表
- Silverlight 2.0学习笔记——RIAs的缺点
- pytorch view()函数
- 演示:思科设备子接口类型帧中继的配置
- 中国的量子软件无法再次失去三十年
热门文章
- 分布式与人工智能课程(part10)--图像库的基本使用
- range python命令_Python学习笔记(一)
- 一行SQL代码能做什么?
- Sklearn参数详解—GBDT
- SAP Fiori Tools 和对应的 CLI (Command Line Interface)
- 推荐一个 Chrome 浏览历史记录管理的扩展 - History Trends Unlimited
- HTML 按钮(button)的 disable 属性和 disable property
- 如何启用 SAP Business Technology Platform 上的 Mobile Services
- SAP 3D visual enterprise viewer 9.0 的下载方式
- 想调试Angular框架的@HostBinding,应该在哪里设置断点