用CSS能做哪样的loading动画效果
Admin 2022-06-16 群英技术资讯 919 次浏览
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以,但是加载时间比较长。
CSS的animation可以做出大多数的loading,比如:
loading1:
1、HTML:
<div id="ddr"> <div class="ddr ddr1"></div> <div class="ddr ddr2"></div> <div class="ddr ddr3"></div> <div class="ddr ddr4"></div> <div class="ddr ddr5"></div> </div>
2、CSS:
#ddr{ margin: 0 auto; width: 70px; height: 120px; } .ddr{ width: 10px; height: 120px; float: left; margin: 2px; background-color: #00ff00; animation: loading 1s infinite ease-in-out;/*animation:动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/ } .ddr2{ animation-delay: -0.9s;/*定义开始执行的地方,负号表示直接从第900ms开始执行*/ } .ddr3{ animation-delay: -0.8s; } .ddr4{ animation-delay: -0.7s; } .ddr5{ animation-delay: -0.6s; } @keyframes loading { 0%,40%,100%{ /*定义每帧的动作*/ -webkit-transform: scaleY(0.5); } 20%{ -webkit-transform: scaleY(1); } }
loading2:
1、HTML:
<div id="circle"></div>
2、CSS:
#circle{ margin: 20px auto; width: 100px; height: 100px; border: 5px white solid; border-left-color: #ff5500; border-right-color:#0c80fe; border-radius: 100%; animation: loading1 1s infinite linear; } @keyframes loading1{ from{transform: rotate(0deg)}to{transform: rotate(360deg)} }
loading3:
1、HTML:
<div id="loader"> <div id="loader-inner"></div> </div>
2、CSS:
#loader3{ box-sizing: border-box; position: relative; margin-left: 48%; transform: rotate(180deg); width: 50px; height: 50px; border: 10px groove rgb(170, 18, 201); border-radius: 50%; animation: loader-3 1s ease-out alternate infinite;/* alternate表示则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)反向播放 */ } #loader3-inner{ box-sizing: border-box; width: 100%; height: 100%; border: 0 inset rgb(170, 18, 201); border-radius: 50%; animation: border-zoom 1s ease-out alternate infinite; } @keyframes loader-3 { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(-360deg); } } @keyframes border-zoom { 0%{ border-width: 0px; } 100%{ border-width: 10px; } }
loading4:
1、HTML:
<div id="loading"> <div id="loader" class="heart"></div> </div>
2、CSS:
#loading4{ width: 100%; height: 100px; } #loader4{ position: relative; margin-left: calc(50% - 25px); width: 50px; height: 50px; animation: loader-4 1s ease-in-out alternate infinite; } .heart:before{ position: absolute; left: 11px; content: ""; width: 50px; height: 80px; transform: rotate(45deg); background-color: rgb(230, 6, 6); border-radius: 50px 50px 0 0; } .heart:after{ position: absolute; right: 11px; content: ""; width: 50px; height: 80px; background-color: rgb(230, 6, 6); transform: rotate(-45deg); border-radius: 50px 50px 0 0; } @keyframes loader-4 { 0%{ transform: scale(0.2); opacity: 0.5; } 100%{ transform: scale(1); opacity: 1; } }
逢年过节,百度或者谷歌都会在首页播放一段动画,比如元宵节:
这个动画不是gif图,而是一张长长的包含所有帧的图片:
仿照animation一帧一桢的思路,可以将这张图片做成动画:
#picHolder{ /* 图片样式 */ position: absolute; top: %; left: %; width: px; height: px; margin-left:-px; background-image: url("../../../Library_image/tangyuan.png"); background-repeat: no-repeat; background-position-x: ; cursor: pointer; } function animation () { /* 定时移动图片,使观众看到不同的帧 */ var po = var i = var holder = document.getElementById('picHolder') setInterval(function () { po += - i++ holder.style.backgroundPositionX = po + 'px' if (i >= ) { i = po = } }, ) } window.onload = function () { animation() }
总结
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
一、旧的opacity设置以下代码是firefox和safari旧版本所需的透明度设置:代码如下复制代码#myelement{-khtml-opacity:.5;-moz-opacity:0.5;}-khtml-opacity设置是针对旧版本的webkit渲染引擎,这种专用属性现在已经过时了,除非你还有需要兼容safari1.x.的用户。第二行使用专用属性-moz-opacity是为了兼容mozilla渲染引擎的 ...
css中实现2d旋转的函数是“rotate()”函数。rotate()函数可与transform属性配合使用,语法为“元素{transform:rotate(角度值);}”;参数角度为正数时元素顺时针旋转,参数角度为负数时元素逆时针旋转。
左边固定宽右边自适应效果如何做?这是一道面试题,你有多少种办法呢?这里我们假设左边名为 left,宽度为 200 px,右边名为 right。即默认.left { width: 200px;}我的理解分四大类 flex 布局
在开发中,有些需要需要我们给图片加遮罩层,例如鼠标移至图片有遮罩层效果且有删除,添加,更改等操作,那么这一效果要如何实现呢?下面小编就给大家分享如何利用css给图片加遮罩层的代码。
这篇文章主要介绍了css高级应用三种方法实现多行省略的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008