专栏首页蚂蚁开源社区【前端艺术】HTML5 Canvas和jQuery实时动态天气预报

【前端艺术】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 删除。

原始发表时间:2019-08-20

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    用户5997198
  • 【开源游戏/跑酷】我就是我

    我就是我是一款非常有趣另类的敏捷类跑酷HTML5游戏,在游戏中吃到桃心可以加快奔跑的速度,另外掉坑里,你要快速的点击屏幕,可以飞起来,只要你够牛X,你可以永远不...

    用户5997198
  • 简洁的HTML5视频播放器UI特效开源库

    近期在做一个项目时,遇到了播放视频的问题,找了很多插件和方法,今天介绍的这个是比较认为简洁和功能强大的开源库,可以任意修改播放格式。

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

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

    用户5997198
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • 前端|CSS信封的制作方法

    利用Hbuilder来制作一个信封,此处使用的是先制作信封边框再进行文字加入的方法来设计。

    算法与编程之美
  • 使用纯CSS来画一颗鸡蛋

    所以接下来我们要给它增添一个border-radius 以及一个background-color 属性:

    学前端
  • 【neumorphism】CSS实现新拟态设计风格 计算器

    咪啪咪啪
  • WordPress美化日主题文章底部版权说明并附加后台自定义字段

    个东西是过年期间美化向日葵那个站搞的成果。有人喜欢要我贴个教程。其实有一点点复杂但是搞清楚了也很简单实现。主要是要有一点点基础。那么既然有人需要,还是贴一个教程...

    AlexTao
  • Js+Css做一个可弹起压下效果的按钮

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券