我今天刚学css动画，跟着B站的视频做的
<!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>纯css果冻泡泡</title><style>*{margin:0;padding:0;}body{/*100%窗口显示*//*弹性布局 居中显示*/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: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 #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;}.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-in-out infinite;}/*定义动画*//*泡泡浮动动画*/@keyframes bubble{0%,100%{transform:translateY(0);}50%{transform:translateY(-90px);}}/*阴影动画*/@keyframes shadow{0%,100%{transform:scale(0.5);}50%{transform:scale(1)}}</style></head><body><div class="container"><div class="bubble"></div><div class="shadow"></div></div></body></html>
如果觉得《CSS动画——粉红泡泡》对你有帮助，请点赞、收藏，并留下你的观点哦！
