模拟简单的电池充电效果
先画出电池的轮廓
<html>
<head>
<style>
html,body {
width: 100%;
height: 100%;
display: flex;
background-color: #e4e4e4;
overflow: hidden;
}
.container {
position: relative;
width: 140px;
margin: auto;
}
.battery {
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
background: #fff;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="battery"></div>
</div>
</body>
</html>
此时需要给电池加上一个冒,使用伪元素实现:
.battery::before {
content: '';
/*清除浮动*/
position: absolute;
width: 26px;
height: 10px;
top: 0;
left: 50%;
transform: translate(-50%, -10px);
border-radius: 5px 5px 0 0;
background: rgba(240, 240, 240, .88);
}
下面模拟充电的效果:通过色块的位移动画实现充电的动画。
.battery::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 90%;
background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
filter: hue-rotate(90deg);
/*使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画*/
animation: charging 6s linear infinite;
}
@keyframes charging {
50% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
}
95% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
}
}
第一种简单的效果已经实现了,这种效果可以继续进行优化。
2.水波效果的充电效果
css 实现这种波浪滚动效果,其实只是用了一种障眼法,用圆形进行模拟.
先实现圆形得效果:
<html>
<head>
<style>
html,body {
width: 100%;
height: 100%;
display: flex;
background: #e4e4e4;
}
.container {
position: relative;
width: 140px;
margin: auto;
}
.wave-box {
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
}
.g-wave {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, .8);
border-radius: 45% 47% 44% 42%; /*不可以是纯圆形*/
bottom: 25px;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
/*animation: move 10s linear infinite;*/
}
</style>
</head>
<body>
<div class="container">
<div class="wave-box">
<div class="g-wave"></div>
<!-- <div class="g-wave"></div>
<div class="g-wave"></div> -->
</div>
</div>
</body>
</html>
在加两个圆,进行效果得叠加:
.g-wave:nth-child(2) {
border-radius: 38% 46% 43% 47%;
transform: translate(-50%, 0) rotate(-135deg);
}
.g-wave:nth-child(3) {
border-radius: 42% 46% 37% 40%;
transform: translate(-50%, 0) rotate(135deg);
}
之后让第一个圆转起来:
@keyframes move {
100% {
transform: translate(-50%, -160px) rotate(720deg);
}
}
之后把圆形可电池效果进行合并:
<html>
<head>
<title></title>
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #e4e4e4;
}
.container {
position: relative;
width: 140px;
margin: auto;
}
.header {
position: absolute;
width: 26px;
height: 10px;
left: 50%;
top: 0;
transform: translate(-50%, -10px);
border-radius: 5px 5px 0 0;
background: rgba(255, 255, 255, .88);
}
.battery {
position: relative;
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
background: #fff;
z-index: 1;
}
.battery::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 80%;
background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
animation: charging 10s linear infinite;
filter: hue-rotate(90deg);
}
.wave-box {
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
overflow: hidden; /*隐藏掉多余得圆形部分*/
}
.g-wave {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, .8);
border-radius: 45% 47% 44% 42%;
bottom: 25px;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
animation: move 10s linear infinite;
}
.g-wave:nth-child(2) {
border-radius: 38% 46% 43% 47%;
transform: translate(-50%, 0) rotate(-135deg);
}
.g-wave:nth-child(3) {
border-radius: 42% 46% 37% 40%;
transform: translate(-50%, 0) rotate(135deg);
}
@keyframes charging {
50% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
}
95% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
}
}
@keyframes move {
100% {
transform: translate(-50%, -160px) rotate(720deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="battery"></div>
<div class="wave-box">
<div class="g-wave"></div>
<div class="g-wave"></div>
<div class="g-wave"></div>
</div>
</div>
</body>
</html>
完结撒花