前端每日實戰8.純 CSS 創作一個充電 loader 特效
阿新 • • 發佈:2018-12-13
原文地址:https://segmentfault.com/a/1190000014669547
右邊多出來的是 :after 的border
HTML程式碼:
<div class="battery"></div>
CSS程式碼:
html, body { margin: 0; padding: 0; height: 100%; display:flex; justify-content: center; align-items: center; /*background: linear-gradient(to bottom, teal, aqua);*/ } .battery{ width: 6em; height: 3em; color: midnightblue; border: 0.5em solid currentColor; border-radius: 0.2em; font-size: 2em; position: relative; /* 充電顏色 */ background-image: linear-gradient(to right, green, green); background-repeat: no-repeat; background-size: 30% 80%; /* 給內部充電影象定位 */ background-position: top 0.3em left 0.3em; animation: charge 5s steps(8) infinite; } .battery::after{ position: absolute; content: ''; width: 0.5em; height: 2em; background-color: currentColor; top: 0.5em; right: -1em; border-radius: 0 0.2em 0.2em 0; } @keyframes charge { from { background-size: 10% 80%; } to { background-size: 95% 80%; } }