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实现的水平标题菜单)
- css3动画平移代码(利用CSS3实现炫酷的飞机起飞动画)
- css3字体怎么写(css3个性化字体_动力节点Java学院整理)
- css3渐变动画(CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法)
- web前端css总结(前端面试必备之CSS3的新特性)
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- css flex布局教程(详解CSS3伸缩布局盒模型Flex布局)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- css3中一些常用的特效果(CSS3 制作的书本翻页特效)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- css3无缝滚动效果(CSS3 制作的图片滚动效果)
- css3基础入门(详解使用CSS3的@media来编写响应式的页面)
- css3最新特效(CSS3实现的文字弹出特效)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- css3控制效果过渡的属性(css3之UI元素状态伪类选择器实例演示)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- 乾隆为何这么喜爱白塔原因是什么(乾隆为何这么喜爱白塔原因是什么)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
- 今日大雪,大雪养生这样做,一年都有好气色(大雪养生这样做)
- 粗盐是什么 粗盐的功效与作用(粗盐的功效与作用)
- 会 吃人 的客机 从天堂到地狱只需5分钟,图-104如何做到(会吃人的客机)
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)
热门推荐
- php数据错误处理函数(php中错误处理操作实例分析)
- pythondjango搭建web(PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上)
- centos修改网络配置(CentOS设置IP连接网络实现过程图解)
- php各个模式使用场景(PHP 并发场景的几种解决方案)
- 使用react生命周期的常见情况(react+ts实现简单jira项目的最佳实践记录)
- php 5与7有什么改变(php5与php7的区别点总结)
- dedecms怎么设置翻页(DEDECMS中获取无限栏目子分类的方法)
- MySQL中查询数据库的大小
- python自动解密(python实现移位加密和解密)
- python编写的小程序(几个适合python初学者的简单小程序,看完受益匪浅!推荐)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9