HTML5 Canvas和jQuery实时天气预报代码解析「附源码」

这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用CSS3帧动画来制作各种动画效果。

制作方法

HTML结构


该特效的HTML结构采用无序列表的HTML结构,其中每一个li.card元素代表一种卡片。

<ul class="card-list"> <li class="card"> <div class="card-color color-rain"> <div class="rain"></div> </div> <div class="card-info"> <p>63 ℉</p> <p>low of 61 ℉</p> </div> </li> ...... </ul>

CSS样式


首先给卡片一些基本样式。

.card { width: 18.57%; background-color: #3c3b3d; float: left; margin: 0 20px 20px 0; overflow: hidden; } .card:nth-child(5n) { margin-right: 0; } .card .card-color { position: relative; width: 100%; padding: 6.5em 1em; display: block; } .card .card-color:after { position: absolute; content: ''; top: 0; right: 0; height: 100%; width: 50%; } .card .card-info { padding: 1em; color: #808080; text-align: center; } .card .card-info p { font-size: 0.85rem; margin-bottom: .75em; } .card .card-info p:first-child { font-weight: 600; font-size: 0.9rem; text-transform: uppercase; color: #fff; } .card .card-info p:last-child { margin-bottom: 0; }

对于第一种下雨效果,特效中对div.rain元素使用了rain帧动画。然后使用div.rain元素的:after伪元素来制作云彩的阴影效果,并应用rain_shadow帧动画。最后使用div.rain元素的:before伪元素来制作雨点效果,并应用rain_rain帧动画。

.rain { animation: rain 9s ease-in-out infinite 1s; -webkit-animation: rain 9s ease-in-out infinite 1s; background: #CCCCCC; border-radius: 50%; box-shadow: #CCCCCC 65px -25px 0 -5px, #CCCCCC 25px -25px, #CCCCCC 5px 0px 0 2px, #CCCCCC 10px 0px 0 2px, #CCCCCC 15px 0px 0 2px, #CCCCCC 20px 0px 0 2px, #CCCCCC 25px 0px 0 2px, #CCCCCC 30px 0px 0 2px, #CCCCCC 35px 0px 0 2px, #CCCCCC 40px 0px 0 2px, #CCCCCC 45px 0px 0 2px, #CCCCCC 50px 0px 0 2px, #CCCCCC 55px 0px 0 2px, #CCCCCC 60px 0px 0 2px, #CCCCCC 65px 0px 0 2px, #CCCCCC 70px 0px 0 2px, #CCCCCC 75px 0px 0 2px; display: block; height: 50px; width: 50px; position: absolute; left: 40px; top: 80px; } .rain:after { animation: rain_shadow 9s ease-in-out infinite 1s; -webkit-animation: rain_shadow 9s ease-in-out infinite 1s; background: #000000; border-radius: 50%; content: ''; height: 15px; width: 120px; opacity: 0.2; position: absolute; left: 5px; bottom: -60px; transform: scale(.7); -webkit-transform: scale(.7); } .rain:before { animation: rain_rain .7s infinite linear; -webkit-animation: rain_rain .7s infinite linear; content: ''; background: transparent; margin-left: 0px; border-radius: 50%; display: block; height: 6px; width: 3px; opacity: 0.3; transform: scale(.9); -webkit-transform: scale(.9); }

源码下载请点击阅读原文

↓↓↓↓↓↓

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

如何破解前端工程师的局限性

2、全栈开发,就是会前端的,也会后端的技术。要求是全能,就是从前到后一把梭了。但是实践证明,这种全栈开发,一般到后来就是全都会,但全都不精通。

9220
来自专栏编程创造城市

html网页开发基础

1.可以写网页名称(显示在浏览器的左上方),网页名称用标记<title></title>

12510
来自专栏小白帽学习之路

XSS相关Payload及Bypass的备忘录(上)

跨站脚本攻击(XSS)是一种计算机安全漏洞,通常出现在Web应用程序中。这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户会访问到的页面中,当正常用户访问该页面时...

39340
来自专栏达达前端

Web前端鼠标悬停实现显示与隐藏效果

css定义,偏移量,相对定位,绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位,就是定义网页...

27730
来自专栏日拱一卒

如何快速识别出网页上的字体 | 利器

又赶上这个活动图、单页乱飞的季节,对于一个好的页面除了内容、图片重要外,字体也是不容忽视的。这个看看Apple家常用的冬青黑、PingHei就全明白了。还有就是...

27120
来自专栏腾讯云安全的专栏

六个行业小故事,带你看见安全的力量

今天之前或许你总有个疑问: 网络安全除了抵御攻击和查“漏”补缺之外 还能做什么? 别问,问就是全能 看完下面这五个行业的小故事 你会发现,安全的力量超乎你的想...

11320
来自专栏有三AI

【知识星球】3D网络结构解读系列上新

欢迎大家来到《知识星球》专栏,这两天有三AI知识星球专注更新3D相关的网络模型解读,共10期左右。3D网络在视频数据,点云图像,3D医学图像,光流估计等领域有重...

12320
来自专栏从零开始学 Web 前端

css样式优先级计算规则

9120
来自专栏李才哥

前端面试系列(7)

css的盒模型本质是一个盒子,封装周围的HTML元素,包括:外边距、边框、内边距和实际内容。

6220
来自专栏front-end technology

从零认识webpack4.0,带你走进神秘的webpack

前言: 作为一个现代javascript 应用程序的静态模块打包器,webpack能将各种资源,如js,css, 图片等作为模块来处理,是当下前端工程化的一个很...

10030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励