css实现泡泡上下浮动动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现泡泡上下浮动动画效果代码,晶莹剔透。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .bubble { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 25px rgb(255 255 255 / .25); -webkit-animation: animate 8s ease-in-out infinite; animation: animate 8s ease-in-out infinite; } .bubble:nth-child(2) { position: relative; zoom: 0.45; left: -10px; top: -120px; -webkit-animation-delay: -4s; animation-delay: -4s; } .bubble:nth-child(3) { position: relative; zoom: 0.24; right: -81px; top: -300px; -webkit-animation-delay: -6s; animation-delay: -6s; } .bubble:nth-child(4) { position: relative; zoom: 0.35; left: -120px; bottom: -200px; -webkit-animation-delay: -2.4s; animation-delay: -2.4s; } .bubble:nth-child(5) { position: relative; zoom: 0.5; left: 0; top: 168px; -webkit-animation-delay: -5s; animation-delay: -5s; } @-webkit-keyframes animate { 0%, 100% { transform: translateY(-8%); } 50%{ transform: translateY(8%); } } @keyframes animate { 0%, 100% { transform: translateY(-8%); } 50%{ transform: translateY(8%); } } .bubble::before { content: ""; position: absolute; inset: 50px auto auto 45px; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; z-index: 8; filter: blur(2px); } .bubble::after { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0