html 天气特效,用CSS制作天气特效动画,源码分享
效果图
今天给大家带来的是CSS3动画天气图标代码,简单实用好看!
CSS源码:
html { box-sizing: border-box; }
html *,
html *:before,
html *:after { box-sizing: inherit; }
body {
max-width: 42em;
padding: 2em;
margin: 0 auto;
color: #161616;
font-family: 'Roboto', sans-serif;
text-align: center;
background-color: currentColor;
}
h1 {
margin-bottom: 1.375em;
color: #fff;
font-weight: 100;
font-size: 2em;
text-transform: uppercase;
}
p,
a {
color: rgba(255,255,255,0.3);
font-size: small;
}
p { margin: 1.375rem 0; }
.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; }
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 2.5em;
height: 2.5em;
margin: -1.25em;
background: currentColor;
border-radius: 50%;
box-shadow: 0 0 0 0.375em #fff;
animation: spin 12s infinite linear;
}
.rays {
position: absolute;
top: -2em;
left: 50%;
display: block;
width: 0.375em;
height: 1.125em;
margin-left: -0.1875em;
background: #fff;
border-radius: 0.25em;
box-shadow: 0 5.375em #fff;
}
.rays:before,
.rays:after {
content: '';
position: absolute;
top: 0em;
left: 0em;
display: block;
width: 0.375em;
height: 1.125em;
transform: rotate(60deg);
transform-origin: 50% 3.25em;
background: #fff;
border-radius: 0.25em;
box-shadow: 0 5.375em #fff;
}
.rays:before {
transform: rotate(120deg);
}
.cloud + .sun {
margin: -2em 1em;
}
.rain,
.lightning,
.snow {
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;
}
.bolt {
position: absolute;
top: 50%;
left: 50%;
margin: -0.25em 0 0 -0.125em;
color: #fff;
opacity: 0.3;
animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) {
width: 0.5em;
height: 0.25em;
margin: -1.75em 0 0 -1.875em;
transform: translate(2.5em, 2.25em);
opacity: 0.2;
animation: lightning 1.5s linear infinite;
}
.bolt:before,
.bolt:after {
content: '';
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin: -1.625em 0 0 -1.0125em;
border-top: 1.25em solid transparent;
border-right: 0.75em solid;
border-bottom: 0.75em solid;
border-left: 0.5em solid transparent;
transform: skewX(-10deg);
}
.bolt:after {
margin: -0.25em 0 0 -0.25em;
border-top: 0.75em solid;
border-right: 0.5em solid transparent;
border-bottom: 1.25em solid transparent;
border-left: 0.75em solid;
transform: skewX(-10deg);
}
.bolt:nth-child(2):before {
margin: -0.75em 0 0 -0.5em;
border-top: 0.625em solid transparent;
border-right: 0.375em solid;
border-bottom: 0.375em solid;
border-left: 0.25em solid transparent;
}
.bolt:nth-child(2):after {
margin: -0.125em 0 0 -0.125em;
border-top: 0.375em solid;
border-right: 0.25em solid transparent;
border-bottom: 0.625em solid transparent;
border-left: 0.375em solid;
}
.flake:before,
.flake:after {
content: '¼4';
position: absolute;
top: 50%;
left: 50%;
margin: -1.025em 0 0 -1.0125em;
color: #fff;
list-height: 1em;
opacity: 0.2;
animation: spin 8s linear infinite reverse;
}
.flake:after {
margin: 0.125em 0 0 -1em;
font-size: 1.5em;
opacity: 0.4;
animation: spin 14s linear infinite;
}
.flake:nth-child(2):before {
margin: -0.5em 0 0 0.25em;
font-size: 1.25em;
opacity: 0.2;
animation: spin 10s linear infinite;
}
.flake:nth-child(2):after {
margin: 0.375em 0 0 0.125em;
font-size: 2em;
opacity: 0.4;
animation: spin 16s linear infinite reverse;
}
/* Animations */
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes cloud {
0% { opacity: 0; }
50% { opacity: 0.3; }
100% {
opacity: 0;
transform: scale(0.5) translate(-200%, -3em);
}
}
@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;
}
}
@keyframes lightning {
45% {
color: #fff;
background: #fff;
opacity: 0.2;
}
50% {
color: #0cf;
background: #0cf;
opacity: 1;
}
55% {
color: #fff;
background: #fff;
opacity: 0.2;
}
}
html 天气特效,用CSS制作天气特效动画,源码分享相关推荐
- web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- html5 css3舞台灯光,HTML5特效库 CSS3 实现灯光照射显示文字动画源码
效果图 各位朋友,大家好! 今天给大家带来的特效源码是 CSS3 实现灯光照射显示文字动画源码 是不是很炫酷,大家可以按照自己的想法进行修改! 有想要文件版源码的可以私聊我 废话不多说,上源码! CS ...
- html动画爱心制作代码,CSS心形加载的动画源码的实现
废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .heart-loading { margin-top: 120px; width: 200px; height: 200px; ...
- 纯html css动画效果,8个超震撼的HTML5和纯CSS3动画源码
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比 ...
- 俄罗斯方块源码分享 html+css+js
效果: [html+css+js]俄罗斯方块源码分享 这是在网上跟着黑马的视频做的,然后也加了些自己的想法. 在线试玩:http://www.beijiguang.site/game/index.ht ...
- HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码...
动漫樱桃小丸子5页表格div+css学生网页设计作业源码~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业 临近期末, 你 ...
- HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码
动漫樱桃小丸子5页表格div+css学生网页设计作业源码~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业 临近期末, 你 ...
- 首发全DIY强大微信朋友圈截图制作生成小程序源码下载点赞,评论等等
这是一款朋友圈截图制作的一款小程序源码 主要的特点是DIY,之前小编发布过朋友圈截图的小程序 不管之前那款小程序只能生成点赞数量,无法获取用户名等等 但是这一款就不一样了,这一款刚刚也说了特点是DIY ...
- DIY微信朋友圈截图制作生成小程序源码下载
这是一款朋友圈截图制作的一款小程序源码 主要的特点是DIY,之前小编发布过朋友圈截图的小程序 不管之前那款小程序只能生成点赞数量,无法获取用户名等等 但是这一款就不一样了,这一款刚刚也说了特点是DIY ...
最新文章
- 丽水风光(二)—劫色“古堰画乡”
- 学python那本书比较好-Python初学者最应该读的8本书
- LeetCode 1865. 找出和为指定值的下标对(哈希)
- sdibt 1244类似于拓扑排序
- telnet无法访问
- LoadRunner压力测试:详细操作流程
- 计算机桌面美化软件,桌面美化软件哪个好_桌面美化软件排行榜【最新】-太平洋电脑网...
- ogg 抽取进程停不下来的解决方法
- 关于手机常见音频POP音产生的原因以及解决思路(一)——耳机插入与拔出
- NAOMI: Non-Autoregressive MultiresolutionSequence Imputation(非自回归多分辨率序列填补)论文详解
- Windows 静态库函数名称问题
- csp-j2第四题解
- python版本的判断、选择指南
- mysql 启动 pid update_MySql服务器启动错误“服务器退出而不更新PID文件”
- 根据时间戳生成当前月份第一天和最后一天
- php键值字符串转数组,PHP数组与字符串互相转换实例
- 达尔优 绿野EK861蓝牙键盘说明书
- MP4播放器的工作原理、底层系统、硬件架构和芯片方案等
- RabbitMQ核心模式
- Thingworx入门笔记
热门文章
- 如何使用log4j记录日志
- okex java sdk_OKEX官网新手使用教程
- pythonwhile循环love_input和while循环——Python编程从入门到实践
- Matlab里evalin和assignin的用法
- AUTOSAR从入门到精通100讲(三十一)-AutoSar中RTE的生成准备
- java枚举怎么编译不行的_java枚举类型
- 孙叫兽进阶之路之压力与绩效
- 任意文件读取及删除漏洞
- java foxmail 附件_foxmail 本程序使用JavaMail进行收取和发送带附件的邮件 - 下载 - 搜珍网...
- 微信公众号网页开发:播放视频,在列表中滑动会脱离文档流