昨晚上闲的没事突然想做几个小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>
好啦，今天先分享这些，以后再有loading我会再补充上来的，嗷，对了，我懒得没做兼容，要是再某些浏览器不能运行，加一下浏览器前缀就好啦