進度條
設置 div 元素屬性 background-image 爲 linear-gradient (漸變)來實現傾斜的進度條,在使用 animation 動畫來讓進度條動起來,就能達到想要的效果啦
HTML 代碼:
<div id="loader"></div>
CSS 代碼:
@keyframes loader{
0% {
}
100% {
background-position:200px;
}
}
#loader{
width: 200px;
height: 15px;
border-radius: 10px;
margin: 0;
padding: 0;
/* background: #fff; */
background-image: linear-gradient(45deg, #2989d8 32%,#7db9e8 33%,#7db9e8 66%,#2989d8 67%); //自動重複背景
background-size: 60px 15px;
animation: loader 2s linear infinite;
}
效果圖:
立體小球
立體小球使用徑向漸變來模擬小球立體效果
HTML 代碼:
<div class="radial-gradient"></div>
CSS 代碼:
.radial-gradient {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: hotpink; /*左邊的沒有背景色,右邊的加了背景色*/
background-image: radial-gradient(
200px at 50px 60px,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
);
}
效果圖: