基于CSS3实现的几个小loading效果

时间：2021-05-08

CSS3实现的几个小loading效果

昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家

　　　　1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading

　　　　 这个是效果图片

　　　　下面我直接把代码放上来，大家需要的可以直接拉走

核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0 } body { background-color: black } .box { margin: 200px auto; height: 50px; width: 50px; border-radius: 10px; background-color: rgb(0, 174, 255); position: relative; overflow: hidden; border: 1px solid rgb(0, 174, 255); border-top: none; } .a { width: 200px; height: 200px; background: black; position: absolute; left: -80px; top: -180px; border-radius: 80px; animation: xuanzhuan 5s linear infinite; z-index: 2 } @keyframes xuanzhuan{ 0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } </style></head><body> <div class="box"> <div class="a"></div> <div class="b"></div> </div></body></html>　

　　2.普通的圆形loading 这个也很简单 没啥好说的，直接上代码了

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0} li{list-style: none} body,html{ background-color: black; } ul{ height: 40px; width: 200px; margin: 50px auto; } ul>li{ float: left; height: 20px; width: 20px; border-radius: 50%; background: white; margin-left: 10px; animation: move 2s infinite alternate; transform: scale(0.5) } ul>li:nth-of-type(2){ animation-delay: 0.5s; } ul>li:nth-of-type(3){ animation-delay:1s; } @keyframes move{ 0%{transform: scale(0.5);opacity: 0.5} 100%{transform: scale(1);opacity: 1;} } </style></head><body> <ul> <li></li> <li></li> <li></li> </ul></body></html>

　　3.圆形转圈loading

　　思想（把小圆用定位排成圆形，再给每个上添加动画，用delay控制延迟事件即可）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> *{ margin: 0; padding: 0; } .d1{ width: 50px; height: 50px; position: absolute; margin: 100px; } .d1 p{ width: 14px; height: 14px; border-radius: 50%; background: red; position: absolute; animation: dong 1.5s linear infinite; } .d1 p:nth-child(1){ top: 0; left: 0; } .d1 p:nth-child(2){ top: 0; right: 0; } .d1 p:nth-child(3){ right: 0; bottom: 0; } .d1 p:nth-child(4){ bottom: 0; left: 0; } .d1:nth-of-type(2){ transform: rotate(45deg); } @keyframes dong{ 0%{ transform: scale(0); } 50%{ transform: scale(1); } 100%{ transform: scale(0); } } .d1:nth-of-type(1) p:nth-of-type(1){ animation-delay: -0.1s; } .d1:nth-of-type(2) p:nth-of-type(1){ animation-delay: -0.3s; } .d1:nth-of-type(1) p:nth-of-type(2){ animation-delay: -0.5s; } .d1:nth-of-type(2) p:nth-of-type(2){ animation-delay: -0.7s; } .d1:nth-of-type(1) p:nth-of-type(3){ animation-delay: -0.9s; } .d1:nth-of-type(2) p:nth-of-type(3){ animation-delay: -1.1s; } .d1:nth-of-type(1) p:nth-of-type(4){ animation-delay: -1.3s; } .d1:nth-of-type(2) p:nth-of-type(4){ animation-delay: -1.5s; } </style> <body> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> </body></html>

　　4.交叉效果

　　　　这个稍微复杂一点，其实只要捋明白思路，也挺简单的（PS：大家可以把动画挨个取消试试，你就会发现好像并不是很难）

<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"></head><body> <style> body { background-color: #F5F5F5; padding: 100px 120px; } .box { margin-left: 500px; display: block; width: 64px; height: 64px; transform-origin: 16px 16px; animation: xuanzhuan 5s infinite; } .ping { animation: pingyi 2.5s infinite; position: absolute; } .hang { width: 64px; height: 24px; position: absolute; } .hang:nth-child(0) { transform: rotate(0deg); } .hang:nth-child(1) { transform: rotate(90deg); } .hang:nth-child(2) { transform: rotate(180deg); } .hang:nth-child(3) { transform: rotate(270deg); } .ping:nth-child(1) { width: 8px; height: 8px; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; border-radius: 4px; animation-delay: -0.3s; } .ping:nth-child(2) { width: 16px; height: 16px; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; border-radius: 8px; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .ping:nth-child(3) { width: 24px; height: 24px; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; border-radius: 12px; animation-delay: -0.9s; } .blue { background-color: #1f4e5a; } .red { background-color: #ff5955; } .yellow { background-color: #ffb265; } .green { background-color: #00a691; } @keyframes xuanzhuan { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } @keyframes pingyi { 0% {transform: translateX(0);} 25% { transform: translateX(-64px); } 75% { transform: translateX(32px);} 100% {transform: translateX(0);} } </style> <div class="box"> <div class="hang"> <div class="ping blue"></div> <div class="ping blue"></div> <div class="ping blue"></div> </div> <div class="hang"> <div class="ping yellow"></div> <div class="ping yellow"></div> <div class="ping yellow"></div> </div> <div class="hang"> <div class="ping red"></div> <div class="ping red"></div> <div class="ping red"></div> </div> <div class="hang"> <div class="ping green"></div> <div class="ping green"></div> <div class="ping green"></div> </div> </div></body></html>

5.圆形正方形切换小loading

　　这个是真的简单！！！！！

<!doctype html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico"><title>loading-04</title></head><body><style> body{ padding: 80px 100px; } .csshub-loading-icon{ padding:10px; width:10px; height:10px; border-top:20px solid #ED5548; border-right:20px solid #599CD3; border-bottom: 20px solid #5CBD5E; border-left:20px solid #FDD901; background:transparent; animation: csshub-rotate-right-round 1.2s ease-in-out infinite alternate ; } @keyframes csshub-rotate-right-round { 0% { transform: rotate(0deg);} 50% {transform: rotate(180deg); } 100% {transform: rotate(360deg);border-radius:50%;} }</style> <div class="csshub-loading-icon"></div></body></html>

我没做兼容，要是再某些浏览器不能运行，加一下浏览器前缀就好啦！

以上所述是小编给大家介绍的CSS3实现的几个小loading效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章