倒水晃动的效果

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
 *{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 }
 body{
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgb(240, 228, 228);
 }
 .quan{
 position: relative;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 border: 3px solid rgb(246, 247, 248);
 box-shadow: 0 0 0 3px rgb(41, 134, 196);
 }
 .shui{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(23, 106, 201);
 overflow: hidden;
 }
 .shui::after{
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 width: 150%;
 height: 150%;
 border-radius: 40%;
 background-color: rgb(240, 228, 228);
 animation: shi 5s linear infinite;
 }
 @keyframes shi{
 0%{
 transform: translate(-50%,-65%) rotate(0deg);
 }
 100%{
 transform: translate(-50%,-65%) rotate(360deg);
 }
 }
 .shui::before{
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 width: 150%;
 height: 150%;
 border-radius: 42%;
 background-color: rgb(240, 228, 228,0.2);
 animation: xu 7s linear infinite;
 }
 @keyframes xu{
 0%{
 transform: translate(-50%,-60%) rotate(0deg);
 }
 100%{
 transform: translate(-50%,-60%) rotate(360deg);
 }
 }
</style>

</head>
<body>
<div class="quan">

<div class="shui"></div>

</div>
</body>
</html>

作者:yanping原文地址:https://segmentfault.com/a/1190000043819912

%s 个评论

要回复文章请先登录注册