HTML+CSS项目练习（9）-充电动画

1. 充电动画页面效果

2. 完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>充电动画</title>

<link href="4.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="c1">
	<div class="c2"></div>
</div>

</body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background-color:#333333;
    position:relative;
}

.c1{
    width:200px;
    height:320px;
    background-color:#FFFFFF;
    border-radius:10px 10px 5px 5px;
    position:relative;
}
.c1::before{
    content:"";
    width:50px;
    height:20px;
    background-color:#FFFFFF;
    position:absolute;
    top:-20px;
    left:50%;
    margin-left:-25px;
    border-radius:5px 5px 0 0;
}
.c1::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:90%;
    bottom:0;
    border-radius:10px 10px 5px 5px;
    background:linear-gradient(to bottom,#04e963 0%,#0bdf9f 44%,#0bdfc3 100%);
    animation:change 10s linear infinite;
}

.c2{
    width:100%;
    height:100%;
    border-radius:10px 10px 5px 5px;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    overflow:hidden;
}
.c2::before{
    content:"";
    width:400px;
    height:400px;
    background:rgba(255,255,255,0.8);
    position:absolute;
    border-radius:40% 30%;
    left:-50%;
    animation:coverbefore 10s linear infinite;
}
.c2::after{
    content:"";
    width:400px;
    height:400px;
    background:rgba(255,255,255,0.7);
    position:absolute;
    border-radius:42% 40%;
    left:-50%;
    animation:coverafter 10s linear infinite;
}

@keyframes change{
    0%{
        top:100%;
        border-radius:0 0 5px 5px;
        filter:hue-rotate(90deg);
    }
    95%{
        top:5%;
        border-radius:0 0 5px 5px;
    }
    100%{
        top:0%;
        filter:hue-rotate(0deg);
    }
}
    
@keyframes coverbefore{
    0%{
        transform:rotate(0deg);
        bottom:0%;
    }
    100%{
        transform:rotate(360deg);
        bottom:100%;
    }
    }
    @keyframes coverafter{
    0%{
        transform:rotate(30deg);
        bottom:2%;
    }
    100%{
        transform:rotate(360deg);
        bottom:95%;
    }
}

0 条评论