<!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>
