css3动画时间(css3实现的天气图标动画效果)
类别:Web前端 浏览量:2757
时间:2021-11-03 15:27:31 css3动画时间
css3实现的天气图标动画效果实现效果 实现代码html
<li class="wrapper"> <li class="sun"></li> <li class="cloud"> <li class="cloud1"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li class="cloud1 c_shadow"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </li> <li class="cloud_s"> <li class="cloud1"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li class="cloud1 c_shadow"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </li> <li class="cloud_vs"> <li class="cloud1"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li class="cloud1 c_shadow"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> </li> <li class="haze"></li> <li class="haze_stripe"></li> <li class="haze_stripe"></li> <li class="haze_stripe"></li> <li class="thunder"></li> <li class="rain"> <ul> <li></li> <li></li> <li></li> </ul> </li> <li class="sleet"> <ul> <li></li> <li></li> <li></li> </ul> </li> <li class="text"> <ul> <li>Mostly Sunny</li> <li>Partly Sunny</li> <li>Partly Cloudy</li> <li>Mostly Cloudy</li> <li>Cloudy</li> <li>Hazy</li> <li>Thunderstorm</li> <li>Rain</li> <li>Sleet</li> </ul> </li> </li>
css3
@import url(https://fonts.googleapis.com/css?family=Raleway+Dots); body{ margin: 0; padding: 0; background: #33495f; } .wrapper{ width: 150px; height: 150px; position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); } .sun{ position: absolute; bottom: 0px; right: 0px; width: 85px; height: 85px; background: #f9db62; border-radius: 360px; opacity: 1; animation: sun 10s 0s linear infinite; } .cloud{ position: absolute; bottom: 12px; left: 8px; z-index: 2; opacity: 0; animation: cloud 10s 0s linear infinite; } .cloud .cloud1:not(.c_shadow) ul li{ animation: cloudi 10s 0.1s linear infinite; } .cloud .cloud1:not(.c_shadow):before{ animation: cloudi 10s 0s linear infinite; } .cloud_s{ position: absolute; bottom: 70px; left: 150px; transform: scale(0.7,0.7) matrix(-1, 0, 0, 1, 0, 0); z-index: 1; opacity: 0; animation: cloud_s 10s 0s linear infinite; } .cloud_s .c_shadow{ transform: scale(1.02,1.02); } .cloud_vs{ position: absolute; bottom: 90px; left: 30px; transform: scale(0.5,0.5); z-index: 0; opacity: 0; animation: cloud_vs 10s 0s linear infinite; } .c_shadow{ z-index: 4 !important; left: -5px; bottom: -3px !important; } .c_shadow:before{ background: #33495f !important; } .c_shadow ul li{ width: 60px !important; height: 60px !important; background: #33495f !important; float: left; position: absolute; bottom: -2px !important; border-radius: 360px; } .c_shadow ul li:nth-child(2){ width: 80px !important; height: 80px !important; background: #33495f !important; float: left; border-radius: 360px; position: absolute; bottom: 16px !important; left: 25px !important; } .c_shadow ul li:nth-child(3){ width: 70px !important; height: 70px !important; background: #33495f !important; float: left; border-radius: 360px; position: absolute; bottom: 6px !important; left: 60px !important; } .c_shadow ul li:last-child{ width: 60px !important; height: 60px !important; background: #33495f !important; float: left; border-radius: 360px; position: absolute; bottom: 0px; left: 90px; } .cloud1{ position: absolute; bottom: 0px; z-index: 5; } .cloud1:before{ content: ''; position: absolute; bottom: 0px; left: 28px; width: 90px; height: 20px; background: #fff; } .cloud1 ul{ list-style: none; margin: 0; padding: 0; } .cloud1 ul li{ width: 50px; height: 50px; background: #fff; float: left; border-radius: 360px; } .cloud1 ul li:nth-child(2){ width: 70px; height: 70px; background: #fff; float: left; border-radius: 360px; position: absolute; bottom: 18px; left: 25px; } .cloud1 ul li:nth-child(3){ width: 60px; height: 60px; background: #fff; float: left; border-radius: 360px; position: absolute; bottom: 8px; left: 60px; } .cloud1 ul li:last-child{ width: 50px; height: 50px; background: #fff; float: left; border-radius: 360px; position: absolute; bottom: 0px; left: 90px; } .haze{ background: #33495f; position: absolute; bottom: 50px; left: 0px; width: 200px; height: 45px; z-index: 6; opacity: 0; animation: haze 10s 0s linear infinite; } .haze_stripe{ background: #a3b5c7; position: absolute; bottom: 75px; left: 20px; width: 115px; height: 10px; z-index: 17; opacity: 0; border-radius: 360px; animation: haze_stripe 10s 0.1s linear infinite; } .haze_stripe:nth-child(6){ bottom: 55px; animation: haze_stripe 10s 0.2s linear infinite; } .haze_stripe:last-child{ bottom: 35px; animation: haze_stripe 10s 0.4s linear infinite; } .thunder{ position: absolute; bottom: 100px; left: 65px; width: 12px; height: 12px; background: #f9db62; transform: skew(-25deg); opacity: 0; animation: thunder 10s 0s linear infinite; } .thunder:before{ content: ''; position: absolute; top: 11px; left: 0px; width: 25px; height: 8px; background: #f9db62; } .thunder:after{ content: ''; position: absolute; width: 0; height: 0; top: 18px; right: -14px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 20px solid #f9db62; transform: skew(5deg); } .rain{ position: absolute; bottom: 0px; left: 25px; } .rain ul{ list-style: none; margin: 0; padding: 0px; } .rain ul li{ float: left; position: absolute; bottom: 50px; left: 50px; margin-left: 20px; background: #6ab9e9; height: 40px; width: 10px; border-radius: 360px; transform: rotate(35deg); opacity: 0; } .rain ul li:first-child{ animation: raini 10s 0s linear infinite; } .rain ul li:nth-child(2){ animation: rainii 10s 0.2s linear infinite; } .rain ul li:last-child{ animation: rainiii 10s 0.4s linear infinite; } .sleet{ position: absolute; bottom: 0px; left: 25px; } .sleet ul{ list-style: none; margin: 0; padding: 0px; } .sleet ul li{ float: left; position: absolute; bottom: 50px; left: 50px; margin-left: 20px; background: #fff; height: 40px; width: 10px; border-radius: 360px; transform: rotate(35deg); opacity: 0; } .sleet ul li:first-child{ animation: raini 10s 1.0s linear infinite; } .sleet ul li:nth-child(2){ animation: rainii 10s 1.4s linear infinite; } .sleet ul li:last-child{ animation: rainiii 10s 1.6s linear infinite; } .text{ position: absolute; bottom: 0px; } .text ul{ list-style: none; margin: 0; padding: 0; } .text ul li{ position: absolute; bottom: -50px; width: 150px; color: #fff; font-family: 'Raleway Dots', cursive; font-weight: 100; font-size: 20px; text-align: center; opacity: 0; } .text ul li:first-child{ animation: fade_in 10.0s 0s linear infinite; } .text ul li:nth-child(2){ animation: fade_in 10.0s 1.6s linear infinite; } .text ul li:nth-child(3){ animation: fade_in 10.0s 2.4s linear infinite; } .text ul li:nth-child(4){ animation: fade_in 10.0s 3.4s linear infinite; } .text ul li:nth-child(5){ animation: fade_in 10.0s 4.0s linear infinite; } .text ul li:nth-child(6){ animation: fade_in 10.0s 5.4s linear infinite; } .text ul li:nth-child(7){ animation: fade_in 10.0s 6.4s linear infinite; } .text ul li:nth-child(8){ animation: fade_in 10.0s 7.2s linear infinite; } .text ul li:nth-child(9){ animation: fade_in 10.0s 8.2s linear infinite; } @keyframes sun{ 0%{ opacity: 1; bottom: 35px; right: 35px; } 4%{ bottom: 80px; right: 80px; } 4.5%{ bottom: 75px; right: 75px; opacity: 1; } 40%{ opacity: 1; } 41%{ bottom: 75px; right: 75px; opacity: 0; } 100%{ opacity: 0; bottom: 0px; right: 0px; } } @keyframes cloud{ 0%{ transform: scale(0.8); left: 120px; bottom: 35px; opacity: 0; } 2%{ opacity: 1; } 3.5%{ bottom: 35px; left: 10px; opacity: 1; } 16%{ transform: scale(0.8); } 18%{ transform: scale(0.95); } 19%{ transform: scale(0.9); } 48%{ opacity: 1; bottom: 35px; } 50%{ bottom: 70px; } 64%{ } 96%{ opacity: 1; } 100%{ opacity: 0; bottom: 70px; left: 10px; } } @keyframes cloud_s{ 0%{ transform: scale(0.6); opacity: 0; bottom: 40px; left: 18px; } 23%{ opacity: 0; } 24%{ opacity: 1; bottom: 40px; left: 30px; } 28%{ opacity: 1; bottom: 85px; left: 60px; } 32%{ transform: scale(0.6); } 34%{ transform: scale(0.75); } 35%{ transform: scale(0.7); } 48%{ opacity: 1; } 49%{ opacity: 0; } 100%{ transform: scale(0.7); opacity: 0; bottom: 85px; left: 60px; } } @keyframes cloud_vs{ 0%{ opacity: 0; bottom: 85px; left: 60px; } 39%{ opacity: 0; } 40%{ opacity: 1; bottom: 85px; left: 60px; } 42%{ bottom: 125px; left: 10px; } 43%{ bottom: 120px; left: 15px; } 48%{ opacity: 1; } 49%{ opacity: 0; } 100%{ opacity: 0; bottom: 120px; left: 15px; } } @keyframes haze{ 0%{ opacity: 0; } 48%{ height: 0px; opacity: 0; } 49%{ height: 45px; opacity: 1; } 57%{ opacity:1; height: 45px; } 58%{ opacity: 0; height: 0px; } } @keyframes haze_stripe{ 0%{ opacity: 0; } 48%{ opacity: 0; } 49%{ opacity: 1; } 56%{ opacity:1; } 57%{ opacity: 0; } } @keyframes cloudi{ 0%{ background: #fff; } 56%{ background: #fff; } 57%{ background: #92a4b6; } 100%{ background: #92a4b6; } } @keyframes thunder{ 0%{ opacity: 0; bottom: 100px; left: 65px; } 62%{ opacity: 0; bottom: 100px; left: 65px; } 64%{ opacity: 1; bottom: 50px; left: 60px; } 65%{ opacity: 1; bottom: 55px; left: 61px; } 72%{ opacity: 1; bottom: 55px; left: 61px; } 73%{ opacity: 0; } 100%{ opacity: 0; bottom: 55px; } } @keyframes raini{ 0%{ opacity: 0; bottom: 100px; left: 60px; } 72%{ opacity: 0; bottom: 100px; left: 60px; } 73%{ opacity: 1; bottom: 15px; left: 50px; } 74%{ opacity: 1; bottom: 25px; left: 52px; } 80%{ opacity: 1; bottom: 25px; left: 52px; } 81%{ opacity: 0; bottom: -15px; left: 6px; } 100%{ opacity: 0; bottom: 20px; } } @keyframes rainii{ 0%{ opacity: 0; bottom: 100px; left: 30px; } 72%{ opacity: 0; bottom: 100px; left: 30px; } 73%{ opacity: 1; bottom: 15px; left: 20px; } 74%{ opacity: 1; bottom: 25px; left: 22px; } 80%{ opacity: 1; bottom: 25px; left: 22px; } 81%{ opacity: 0; bottom: -15px; left: -6px; } 100%{ opacity: 0; bottom: 20px; } } @keyframes rainiii{ 0%{ opacity: 0; bottom: 100px; left: 0px; } 72%{ opacity: 0; bottom: 100px; left: 0px; } 73%{ opacity: 1; bottom: 15px; left: -10px; } 74%{ opacity: 1; bottom: 25px; left: -8px; } 80%{ opacity: 1; bottom: 25px; left: -8px; } 81%{ opacity: 0; bottom: -15px; left: -28px; } 100%{ opacity: 0; bottom: 20px; } } @keyframes fade_in{ 0%{ opacity: 0; } 8%{ opacity: 1; } 9%{ opacity: 1; } 11%{ opacity: 1; } 12%{ opacity: 0; } 100%{ oapcity: 0; } }
以上就是css3实现的天气图标动画效果的详细内容,更多关于css3 天气图标动画的资料请关注开心学习网其它相关文章!
您可能感兴趣
- css3基础入门(详解使用CSS3的@media来编写响应式的页面)
- css3三维模型(CSS3系列之3D制作方法案例)
- css3各个动画效果(使用css3制作齿轮loading动画效果)
- css3实现120度的箭头(使用css实现任意大小、任意方向和任意角度的箭头示例)
- css3支持多重背景吗(真正了解CSS3背景下的@font face规则)
- css3渐变色动画代码(CSS3 实现的动态星空背景)
- div和css怎么铺背景(css3实现一个div设置多张背景图片及background-image属性实例演示)
- CSS3中user-select的用法
- css3表单怎么设置大小(CSS3美化表单控件全集)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- css3做出效果(深入解读CSS3中transform变换模型的渲染)
- css3独有属性(CSS3 calc会计算属性详解)
- css3特性动画图(CSS3+DIV实现漂亮的动画彩色标签)
- css3怎么改成3d(灵活运用CSS3特性绘制简易版围棋效果)
- css3引导动画教程(详解Css3新特性应用之过渡与动画)
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
热门推荐
- zabbix如何验证监控(Zabbix 动态执行监控采集脚本的实现原理)
- vue3和vue2(Vue3对比Vue2的优点总结)
- laravel框架运行找不到视图(解决laravel资源加载路径设置的问题)
- php微信支付步骤(PHP实现微信提现企业付款到零钱)
- web开发如何正确使用docker(Docker部署web项目的实现)
- thinkphp标签详解(thinkphp整合系列之极验滑动验证码geetest功能)
- 织梦cms申请代码怎么填(织梦CMS常用的几种字段判断输出实例详解)
- dedecms添加代码(dedecms内容页调用栏目链接和栏目名称的方法)
- mongovue的使用
- nginxpython编写模块(Python开发之Nginx+uWSGI+virtualenv多项目部署教程)