哈哈效果你們就這么看看吧，實在不會截取 gif ，將就將就，或者復制粘貼代碼去看看吧（最好還是去看看效果）
這個效果簡單說就是有一個帶有一半黑邊框的圓用 ease-out （最后以慢速度結尾）進行旋轉，還有一個半白邊框的圓用 ease-in-out （以慢速度開頭與結尾）進行旋轉（用來覆寫黑邊框），完成該效果，最終效果就是，黑邊框先快速“擺脫”白邊框（加載條變長），然后最后再變慢，最后在一個位置結尾（加載條變短）
這個效果是由 3 個部分完成
#loading_item 用一個比較慢的速度進行旋轉，于是每次旋轉的起始位置不同（當然也可以設定讓它別轉了，這樣每次起始位置就相同）
#loading_item::before 充當半個黑邊框的圓
#loading_item::after 充當半個白邊框的圓
（注意哈，這個before和after不能交換位置，否則白邊框到了黑邊框下面，就什么作用都沒了）
還有一些小細節：
- 比如這個白邊框一定要比黑邊框粗，并且一定要調節位置，把這個黑邊框給覆寫好，不然效果很丑很丑
- 這個雖然是設定一半的邊框顏色，但另一半的邊框也要設定寬度，不然邊框會變得一邊寬一邊細，那真的視覺災難
（ yysy ， 還是蠻簡單的，推薦試一下）
<!DOCTYPE html>
<html>
<head>
<style>
*{
padding: 0px;
margin: 0px;
}
#loading_item{
position: absolute;
left: 50vw;
top: 50vh;
width: 200px;
height: 200px;
border-radius: 50%;
transform: translate(-100px,-100px);
background-color: white;
animation-name: rotating_1;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#loading_item::after{
content: "";
position: absolute;
left: -2px;
top: -2px;
width: 195px;
height: 195px;
border-radius: 50%;
border-style: solid;
border-width: 7px;
border-left-color: white;
border-bottom-color: white;
border-right-color: transparent;
border-top-color: transparent;
background-color: transparent;
animation-name: rotating_2;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#loading_item::before{
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-left-color: black;
border-bottom-color: black;
border-right-color: transparent;
border-top-color: transparent;
background-color: transparent;
animation-name: rotating_2;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
@keyframes rotating_1 {
to {transform: translate(-100px,-100px) rotate(360deg)}
}
@keyframes rotating_2 {
to {transform: rotate(360deg)}
}
</style>
</head>
<body>
<div id = 'loading_item'></div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413921.html
標籤：其他