主要就是怎么形成流动效果比较难![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/20e97986d295876f4d3f98562840a321.png)
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}
.oneplus{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 100px auto;
padding: 0 2px;
height:540px;
width: 260px;
border: 2px solid pink;
border-top: 5px solid pink;
border-radius: 30px;
box-shadow: 5px 2px 5px 3px #00000020;
box-sizing: border-box;
background-color: #000;
}
.oneplus::before {
content: "";
position:absolute;
top: 1.8%;
left: 52%;
transform: translate(-50%,0);
border: 30px solid #000000;
border-top-width: 10px;
border-bottom-width: 10px;
border-radius: 0 0 15px 15px;
z-index: 1;
}
.oneplus_top {
margin-top: 7px;
height: 15px;
width: 100%;
border-radius:30px 30px 0 0 ;
background-color: #000;
position: relative;
}
.oneplus_top::after,.oneplus_top::before {
content: "";
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 10px;
box-sizing: border-box;
border-radius: 5px;
background-color:rgb(34, 33, 33) ;
z-index: 10;
}
.oneplus_top::before {
top: 70%;
left: 60%;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.2px solid #ffffff;
background-color: #00000050;
}
.oneplus_middle {
position: relative;
flex: 1;
background-image: linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
}
.oneplus_middle::after,.oneplus_middle::before {
position: absolute;
content: "";
top: 20%;
left: -3%;
height: 70px;
width: 5px;
border-radius: 35px;
box-shadow: 2px 0 3px #000000 inset;
background-color:pink;
transform: rotateY(-10deg);
}
.oneplus_middle::before {
height: 60px;
top: 18%;
left: 101%;
transform: rotateY(10deg);
}
.battery {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 250px;
border-radius: 15px 15px 7px 7px;
background-color: #fff;
}
.battery::before {
position: absolute;
content: "";
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 30px;
border-radius: 7px 7px 0 0;
background-color: #fff;
}
.battery::after {
position: absolute;
z-index: 2;
content:"";
top: 90%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: linear-gradient(to bottom, #b3ffab 15%, #45cadb 44%,#12fff7 100%);
animation: move 5s linear infinite;
}
@keyframes move {
0%{
top: 100%;
filter: hue-rotate(90deg);
}
95%{
top: 5%;
border-radius:0px;
}
100%{
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 0 0;
}
}
.battery .cover{
position: absolute;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius:15px 15px 0 0 ;
z-index: 10;
}
.battery .cover::before {
content: "";
position: absolute;
top: 0;
left:-30% ;
width: 260px;
height: 260px;
border-radius: 40% 30%;
background-color: #ffffff;
animation: coverBeforeAction 5s linear infinite;
}
.battery .cover::after {
content: "";
position: absolute;
top: 0;
left:-30% ;
width: 260px;
height: 260px;
border-radius: 42% 40%;
background-color: #ffffff;
animation: coverAfterAction 5s linear infinite;
}
@keyframes coverBeforeAction{
0%{
transform:rotate(0deg);
top: -3%;
}
100%{
transform:rotate(360deg);
top: -95%;
}
}
@keyframes coverAfterAction{
0%{
transform:rotate(30deg);
top: -3%;
}
100%{
transform:rotate(360deg);
top: -95%;
}
}
.oneplus_bottom {
height: 30px;
border-radius:0 0 25px 25px ;
filter: hue-rotate(0deg);
}
<div class="oneplus">
<div class="oneplus_top">
</div>
<div class="oneplus_middle">
<div class="battery">
<div class="cover"></div>
</div>
</div>
<div class="oneplus_bottom"></div>
</div>