CSS充电特效

末蓝、 2023-05-28 09:56 15阅读 0赞

### CSS充电特效 ###

# html #

<!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>CSS充电特效</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
    <div class="battery"></div>
    </body>
    </html>

# CSS #

html,body{
        
        height: 100%;
        display: flex; /* 弹性盒模型 */
        align-items: center; /* 交叉轴对齐 */
        justify-content: 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,whitesmoke,whitesmoke); /*背景*/
     background-size: 0.3em;
     background-position: top 0.3em left 0.3em;
     animation: charge 5s steps(8) infinite; /* 动画：名称，时间，速率，重复 */
     background-repeat: no-repeat;/*背景图像仅显示一次*/
    }
    .battery::after{  /*battery之后添加，类似于battery的背景*/
        content: '';
        position: absolute; /*绝对定位*/
        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%;
        }
    }

# 效果图 #

![在这里插入图片描述][20200325192724598.gif_pic_center]

# 知识点 #

> linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient  
> background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size  
> background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position  
> steps() https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function\#Timing\_functions  
> currentColor https://developer.mozilla.org/en-US/docs/Web/CSS/color\_value\#Values  
> border-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

[20200325192724598.gif_pic_center]: /images/20230528/ad713b43641e4310a8963cf3347c2eb7.png