通过HTML+CSS 实现一个会动的泡泡
HTML代码
<!DOCTYPE html> <html> <head> <meta http-equiv=content-type content=text/html; charset=utf-8> <meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no> <title>泡泡</title> <link rel=stylesheet href=pp.css> </head> <body> <div class=container> <div class=pp></div> <div class=shadow></div> </div> </body> </html> CSS代码（可根据想要的效果改动相应的数值）
*{ margin: 0; padding: 0; } body{ height: 100vh; /* 弹性布局 居中显示 */ display: flex; justify-content: center; align-items: center; /* 渐变背景 */ background: linear-gradient(150deg,#ffd9e5,#fff0b2,#affffc); /* 溢出隐藏 */ overflow: hidden; } .container{ width: 200px; height: 200px; /* 相对定位 */ position: relative; } /* 泡泡 */ .pp{ width: 100%; height: 100%; /* 径向渐变 */ background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%); border-radius: 50%; /* 阴影 */ box-shadow: inset 0 0 20px #fadbe5, inset 10px 0 46px #f8c4d5, inset 80px 0 60px #c5faf8, inset -20px -60px 100px #9cf6f3, inset 0 50px 140px #ccfffd, 0 0 90px #eafefd; /* 执行动画：动画名 时长 加速后减速 无限次播放 */ animation: bubble 5s ease-in-out infinite; } .shadow{ background-color: rgba(0,0,0,0.15); width: 150px; height: 40px; border-radius: 50%; /* 绝对定位 */ position: absolute; left: 50%; margin-left: -75px; bottom: -100px; /* 一点点模糊效果 */ filter: blur(1px); /* 执行动画：动画名 时长 加速后减速 无限次播放 */ animation: shadow 4s ease infinite; } /* 定义动画 */ /* 泡泡浮动动画 */ @keyframes bubble { 0%{ transform: translate(0px,0px); } 25%{ transform: translate(0px,-200px); } 50%{ transform: translate(100px,-200px); } 75%{ transform: translate(300px,0px); } 100%{ transform: translate(0px,0px); } } /* 投影动画 */ @keyframes shadow { 0%,100%{ transform: scale(1); } 50%{ transform: scale(2); } }