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

2024-07-11 08:25:23

字体：大中小

来源：转载

供稿：网友

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 这个也很简单没啥好说的，直接上代码了