基于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 這個也很簡單沒啥好說的，直接上代碼了