css3中过渡动画的属性(css3 中实现炫酷的loading效果)
类别:Web前端 浏览量:2272
时间:2022-03-31 19:05:37 css3中过渡动画的属性
css3 中实现炫酷的loading效果•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用
•js需要引入jquery 只用到了一点点js
•先看效果图
html:
<li class="box"> <li class="master"> <li class="eyes"> <li class="eyes-ball"></li> </li> <li class="mouth"></li> </li> <li class="master blue"> <li class="eyes"> <li class="eyes-ball"></li> </li> <li class="mouth"></li> </li> </li> <li class="model"> <li class="master"> <li class="eyes"> <li class="eyes-ball"></li> </li> <li class="mouth"></li> </li> <li class="loading"> <li class="loading-bar"></li> </li> <li class="jz-loading">加载中 . . .</li> </li>
css:
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: hsla(0, 100%, 80%, 0.5); display: flex; justify-content: center; align-items:center; } .box{ display: flex; } .master{ width:110px; height:100px; border-radius: 20px; background: red; margin:10px; display: flex; justify-content: center; align-items:center; flex-direction: column; box-shadow: 0 10px 20px rgba(0,0,0,.5); position: relative; animation: jumping 0.8s infinite; transition: all 0.5s; } .master .eyes{ width:35%; height:35%; border-radius:50%; background-color:#fff; display: flex; justify-content: center; align-items:center; } .eyes-ball{ width:30%; height:30%; border-radius: 50%; background-color: #000; animation: eyesmove 1.6s linear infinite alternate; } .master .mouth{ width:40%; height:10px; border-radius:12px; background-color:blue; margin-top: 20px; } .master.blue{ background-color: blue; animation-delay: 0.4s; } .master.blue .mouth{ background: red; } .master::before, .master::after{ content:''; display: block; width: 12px; height: 20px; border-radius: 12px 12px 0 0; background: #fff; position: absolute; top: -15px; transform: translateX(-6px) rotate(45deg); transform-origin: 100% 100%; } .master::after{ transform:translateX(6px) rotate(-45deg); transform-origin: 0 100%; } /*****遮罩层*****/ .model{ position: fixed; width: 100%; height: 100%; background: palevioletred; display: flex; justify-content: center; align-items: center; flex-direction: column; } .loading{ width: 200px; height: 10px; border-radius:12px; background-color: #fff; margin-top: 50px; overflow: hidden; } .loading .loading-bar{ width: 0%; height: 10px; background: red; } .jz-loading{ color: blue; font-weight: bold; position: absolute; top: 50%; transform: translateY(100px); } .move{ transform: scale(0.1) rotate(360deg); } /*****动画*****/ @keyframes jumping{ 0%{ top:0; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); } 50%{ top:-50px; box-shadow: 0 100px 20px rgba(0, 0, 0, .3); } 100%{ top:0; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); } } @keyframes eyesmove{ 0%{ transform: translateX(-100%); } 10%{ transform: translateX(-100%); } 90%{ transform: translateX(100%); } 100%{ transform: translateX(100%); } }
js:
var timer =null; var add =0; timer=setInterval(()=>{ add++; $('.loading-bar').css('width',`${add}%`); if(add>=100){ $('.model .master').addClass('move'); $('.model').fadeOut(); clearInterval(timer); timer =null; } },30)
总结
以上所述是小编给大家介绍的css3 中实现炫酷的loading效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- css3特性动画图(CSS3+DIV实现漂亮的动画彩色标签)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- CSS3 transition过渡效果
- css3滤镜过渡效果代码(CSS3实现的3D隧道效果)
- css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)
- css3边框讲解(详解css3 object-fit属性)
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- css3 图片样式处理(CSS3实现漂亮的照片墙效果的简单实例推荐)
- css3背景制作(纯CSS3实现Material Design效果)
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- css3边框讲解(六种css3实现的边框过渡效果)
- css3弹出动画效果(CSS3实现跳动的动画效果)
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- CSS3中user-select的用法
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
- 读卖乐园的彩灯(读卖乐园的彩灯)
热门推荐
- apache tomcat安装教程(Apache及Tomcat搭建集群环境过程解析)
- windows 10中如何安装numpy(windows下numpy下载与安装图文教程)
- win10上装ubuntu系统(Windows 10 太难用如何定制你的 Ubuntu方法详解)
- laravel查询条件数组写法(解决Laravel 使用insert插入数据,字段created_at为0000的问题)
- 阿里云服务器实例用户名(阿里云服务器新建用户具体方法)
- docker只有localhost可用(浅谈Docker如何自定义host文件)
- 怎样用sql删除表里的重复数据(sql 删除表中的重复记录)
- js实现分页
- mysql大表查询优化方案(mysql查询优化之100万条数据的一张表优化方案)
- Css Reset的作用