soogif.gif
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
html body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
font-family: Avenir, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #2c3e50;
background: #f6f8f9;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul {
list-style-type: disc;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.el-card__body {
display: flex;
align-items: center;
justify-content: center;
height: 430px;
}
.el-card {
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
}
.content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #000;
}
.content .g-container {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}
.content .g-number {
position: absolute;
top: 27%;
z-index: 99;
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
.content .g-contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
-webkit-animation: hueRotate 10s linear infinite;
animation: hueRotate 10s linear infinite;
}
.content .g-circle {
position: relative;
box-sizing: border-box;
width: 300px;
height: 300px;
/* background-color: #fff; */
filter: blur(8px);
}
.content .g-circle:before {
position: absolute;
top: 40%;
left: 50%;
z-index: 99;
width: 176px;
height: 176px;
content: "";
background-color: #000;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.content .g-circle:after {
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 200px;
content: "";
background-color: #00ff6f;
border-radius: 42% 38% 62% 49%/45%;
transform: translate(-50%, -50%) rotate(0);
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
}
.content .g-bubbles {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px;
background-color: #00ff6f;
filter: blur(5px);
border-radius: 100px 100px 0 0;
transform: translate(-50%);
}
.content li {
position: absolute;
background: #00ff6f;
border-radius: 50%;
}
.content li:nth-child(0) {
top: 50%;
left: 36px;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop-data-v-3a62ed49 8s ease-in-out -.275s infinite;
animation: moveToTop-data-v-3a62ed49 8s ease-in-out -.275s infinite
}
.content li:first-child {
top: 50%;
left: 24px;
width: 22px;
height: 22px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 4s ease-in-out -2.047s infinite;
animation: moveToTop 4s ease-in-out -2.047s infinite;
}
.content li:nth-child(2) {
top: 50%;
left: 18px;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 4s ease-in-out -2.462s infinite;
animation: moveToTop 4s ease-in-out -2.462s infinite;
}
.content li:nth-child(3) {
top: 50%;
left: 69px;
width: 23px;
height: 23px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 6s ease-in-out -98ms infinite;
animation: moveToTop 6s ease-in-out -98ms infinite
}
.content li:nth-child(4) {
top: 50%;
left: 67px;
width: 16px;
height: 16px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 7s ease-in-out -71ms infinite;
animation: moveToTop 7s ease-in-out -71ms infinite
}
.content li:nth-child(5) {
top: 50%;
left: 73px;
width: 26px;
height: 26px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 8s ease-in-out -2.077s infinite;
animation: moveToTop 8s ease-in-out -2.077s infinite
}
.content li:nth-child(6) {
top: 50%;
left: 26px;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 9s ease-in-out -4.018s infinite;
animation: moveToTop 9s ease-in-out -4.018s infinite
}
.content li:nth-child(7) {
top: 50%;
left: 56px;
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 9s ease-in-out -4.727s infinite;
animation: moveToTop 9s ease-in-out -4.727s infinite
}
.content li:nth-child(8) {
top: 50%;
left: 53px;
width: 27px;
height: 27px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 8s ease-in-out -4.758s infinite;
animation: moveToTop 8s ease-in-out -4.758s infinite
}
.content li:nth-child(9) {
top: 50%;
left: 61px;
width: 19px;
height: 19px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 4s ease-in-out -1.593s infinite;
animation: moveToTop 4s ease-in-out -1.593s infinite
}
.content li:nth-child(10) {
top: 50%;
left: 68px;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 4s ease-in-out -3.933s infinite;
animation: moveToTop 4s ease-in-out -3.933s infinite
}
.content li:nth-child(11) {
top: 50%;
left: 52px;
width: 26px;
height: 26px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 5s ease-in-out -4.273s infinite;
animation: moveToTop 5s ease-in-out -4.273s infinite
}
.content li:nth-child(12) {
top: 50%;
left: 38px;
width: 28px;
height: 28px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 5s ease-in-out -4.603s infinite;
animation: moveToTop 5s ease-in-out -4.603s infinite
}
.content li:nth-child(13) {
top: 50%;
left: 23px;
width: 25px;
height: 25px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 5s ease-in-out -4.818s infinite;
animation: moveToTop 5s ease-in-out -4.818s infinite
}
.content li:nth-child(14) {
top: 50%;
left: 53px;
width: 25px;
height: 25px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 4s ease-in-out -4.288s infinite;
animation: moveToTop 4s ease-in-out -4.288s infinite
}
.content li:nth-child(15) {
top: 50%;
left: 66px;
width: 25px;
height: 25px;
transform: translate(-50%, -50%);
-webkit-animation: moveToTop 8s ease-in-out -3.803s infinite;
animation: moveToTop 8s ease-in-out -3.803s infinite
}
li::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
@keyframes rotate {
50% {
border-radius: 45%/42% 38% 58% 49%
}
to {
transform: translate(-50%, -50%) rotate(2turn)
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: .1;
transform: translate(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate( 1turn);
}
}
</style>
<body>
<div class="el-card__body">
<div class="content">
<div class="g-container">
<div class="g-number"><span>27.29%</span></div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
