这周赶着课题，第七期等到下周更新，趁着周末的末尾，把我上次520做的那个会动的泡泡代码粘在blog里，放置丢失哈哈
<!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>泡泡</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(150deg,#d299c2,#fef9d7);
overflow: hidden;
}
.container{
width: 200px;
height: 200px;
position: relative;
}
.bubble{
width: 100px;
height: 100px;
background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
border-radius: 50%;
box-shadow: inset 0 0 20px #fff,
inset 10px 0 46px #eaf5fc,
inset 80px 0 60px #efcde6,
inset -20px -60px 100px #f9f6de,
inset 0 50px 140px #f9f6de,
0 0 90px #fff;
animation: bubble 4s ease-in-out infinite;
}
.showed{
background-color:rgba(39, 211, 139, 0.15);
animation: showed 4s ease-in-out infinite;
}
@keyframes bubble{
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}
@keyframes showed{
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container"></div>
<div class="bubble"></div>
<div class="showed"></div>
</body>
</html>