<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #1e90ff;
}
.main{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
background: transparent;
border-radius: 41% 59% 70% 30% / 39% 39% 61% 61%;
box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
10px 10px 20px rgba(0,0,0,0.3),
15px 15px 15px rgba(0,0,0,0.5),
inset -10px -10px 15px rgba(255,255,255,0.8);
animation: move 8s linear infinite alternate;
}
.main::after{
content: '';
position: absolute;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.8);
border-radius: 50%;
left: 60px;
top: 90px;
}
.main::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: rgba(255,255,255,0.8);
border-radius: 50%;
left: 100px;
top: 60px;
}
@keyframes move{
25%{
border-radius: 41% 59% 70% 30% / 39% 39% 61% 61%;
}
50%{
border-radius: 41% 59% 77% 23% / 39% 37% 63% 61%;
}
75%{
border-radius: 41% 59% 21% 79% / 39% 24% 79% 61%;
}
100%{
border-radius: 41% 59% 70% 30% / 39% 39% 61% 61%;
}
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
效果图：
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
