整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
css實現轉圈加載動畫，直接上代碼
Html代碼：
<svg class="circular" viewbox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" />
</svg>
Css代碼：
.circular {
width: 100px;
height: 100px;
animation: rotate 2s linear infinite;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #000;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
效果如下：
?
Hello！小伙伴！
非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
自我介紹 ?(?ˊ?ˋ)?
昵稱：海轟
標簽：程序猿｜C++選手｜學生
簡介：因C語言結識編程，隨后轉入計算機專業，有幸拿過一些國獎、省獎...已保研。目前正在學習C++/Linux/Python
學習經驗：扎實基礎 + 多做筆記 + 多敲代碼 + 多思考 + 學好英語！
在這里插入圖片描述
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>
CSS
html,body{
margin: 0;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #263238;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid red;
}
span {
width : 96px;
height: 96px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 10px red;
border-style: dashed solid solid dotted;
border-bottom-color: transparent;
animation: rotation 2s linear infinite ;
}
span::after{
content: '';
position: absolute;
left: 51px;
top: 79px;
border: 20px solid transparent;
border-right-color: red;
transform: rotate(-45deg);
}
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
}
使用span標簽作為箭尾，設置為
width : 96px;
height: 96px;
border: 10px red;
border-style: dashed solid solid dotted;
border-bottom-color: transparent;
效果圖如下
在這里插入圖片描述
span標簽圓角化
border-radius: 50%;
效果圖如下
在這里插入圖片描述
使用span::after偽類元素 作為箭頭
設置為
position: absolute;
border: 20px solid transparent;
border-right-color: red;
transform: rotate(-45deg);
效果圖如下
設置span::after的位置
注：
/*這里箭頭需要移動的距離*/
left: 51px;
top: 79px;
效果圖如下
為span添加動畫
animation: rotation 2s linear infinite ;
/*動畫實現*/
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
}
效果圖如下
在這里插入圖片描述
文章僅作為學習筆記，記錄從0到1的一個過程。
希望對您有所幫助，如有錯誤歡迎小伙伴指正～
“從輸入URL到頁面加載完成的過程”比喻成一次餐廳用餐體驗，可以這樣解釋：
1.輸入URL：這就像是你決定去某家餐廳吃飯，并告訴出租車司機（瀏覽器）餐廳的地址。這個地址（URL）是找到餐廳（網站服務器）的關鍵。
2. 域名解析：出租車司機需要知道這個地址在哪里。他會查看地圖（域名系統，DNS），將餐廳的名字（域名）轉換成具體的地理位置（IP地址）。
3. 建立連接：找到餐廳后，你需要進入餐廳并坐下（建立與服務器的連接）。如果餐廳很受歡迎，可能需要排隊等位（數據傳輸中的延遲）。
4. 發送請求：坐下后，你向服務員（服務器）點菜（發送網頁請求）。你可能會要求特定的菜單（網站的特定頁面）。
5. 處理請求：服務員回到廚房，告訴廚師你的訂單（服務器處理你的請求）。廚師開始準備你點的菜（生成網頁內容）。
6. 接收響應：菜做好后，服務員將其送到你的桌上（服務器將數據發送回瀏覽器）。這就像是網頁的內容被加載到你的電腦上。
7. 渲染頁面：你看到桌上的菜肴并開始用餐（瀏覽器解析并顯示網頁內容）。這就像是你的瀏覽器將接收到的數據轉換成你可以看到和互動的網頁。
8. 加載完成：當所有的菜都被送到你的桌上，你可以享受完整的用餐體驗（頁面完全加載完畢，可以進行交互）。
就像在餐廳用餐，整個過程涉及多個步驟和不同的參與者，每個環節都至關重要，以確保你最終能享受到你想要的美食（網頁）。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
