css小demo(2) 电池效果

最新推荐文章于 2024-04-30 09:57:08 发布

才华有限

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量2.6k

点赞数

分类专栏： css 文章标签： css小demo

本文链接：https://blog.csdn.net/weixin_42935546/article/details/83033111

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果: 从思否 模仿的案例
![在这里插入图片描述](https://img-blog.csdn.net/20181012213130607?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzNTU0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

静态页面

<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>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>

    <div class="box">
        
    </div>

</body>
</html>

css代码

	body,hrml{
 	   height: 100%;
       background-color: aqua;
	}

.box{
    height: 60px;
    width: 150px;
    margin: 100px auto;
    border:10px solid rebeccapurple;
    position: relative;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, whitesmoke, whitesmoke);
    background-position: top 2px left 3px;
    background-size: 30% 90%;
    animation: change  3s steps(8) infinite  ;
    /* animation: charge 5s steps(8) infinite; */
}


.box::after{
    content: '';
    height: 20px;
    width: 1px;
    background-color: rebeccapurple;
    border: 5px solid rebeccapurple;
    position: absolute;
    top: 15px;
    right: -20px;
    border-radius: 0 2px 2px 0;
}

@keyframes change{

    0%{
        background-size: 10% 90%;
    }
    100%{
        background-size: 95% 90%;
    }

}

才华有限

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css小demo(2) 电池效果

效果: 从思否模仿的案例![在这里插入图片描述](https://img-blog.csdn.net/20181012213130607?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzNTU0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)...
复制链接

扫一扫