之前做个一个需求,水柱慢慢变满;体现进度条
实现原理其实挺简单的:
两个旋转的 带弧度的环球圆球的东西东西 遮掉 纯色的背景;并且慢慢向上移动
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="wave"></div> </div> </body> <style> .wave { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%; /* background-color: rgb(255, 115, 145); */ } .wave:before, .wave:after{ content: ""; position: absolute; width: 400px; height: 400px; /* top: -80px; */ top: 40px; left: 50%; background-color: rgba(255, 255, 255, .4); border-radius: 45%; transform: translate(-50%, -70%) rotate(0); animation: rotate 5s linear infinite; z-index: 10; } .wave:after { border-radius: 47%; background-color: rgba(255, 255, 255, .9); transform: translate(-50%, -70%) rotate(90); animation: rotate1 5s linear infinite; /* animation: rotate 10s linear -5s infinite; */ z-index: 20; } @keyframes rotate { 0% { transform: translate(-50%, -73%) rotate(0deg); top:0px; } 50% { transform: translate(-50%, -73%) rotate(180deg); top: -40; } 100% { transform: translate(-50%, -70%) rotate(360deg); top: -80px; } } @keyframes rotate1 { 0% { transform: translate(-50%, -73%) rotate(0deg); top:0px; } 50% { transform: translate(-50%, -73%) rotate(90deg); top:-40px; } 100% { transform: translate(-50%, -70%) rotate(270deg); top: -80px; } } </style> </html>