div+css实现泡泡上升背景动画效果代码
代码语言:html
所属分类:背景
代码描述:div+css实现泡泡上升背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .wrapper { height: 100%; width: 100%; background-color: #0066cc; position: absolute; } .wrapper h1 { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; font-family: sans-serif; word-spacing: 2px; color: #fff; font-size: 2rem; font-weight: 900; } .wrapper div { height: 60px; width: 60px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 100px; position: absolute; top: 10%; left: 10%; animation: 4s linear infinite; } div .dot { height: 5px; width: 5px; border-radius: 50px; background: rgba(255, 255, 255, 0.5); position: absolute; top: 20%; right: 20%; } .wrapper div:nth-child(2) { top: 20%; left: 20%; animation: animate 8s linear infinite; } .wrapper div:nth-child(3) { top: 60%; left: 80%; animation: animate 10s linear infinite; } .wrapper div:nth-child(4) { top: 40%; left: 40%; animation: animate 3s linear infinite; } .wrapper div:nth-child(5) { top: 66%; left: 30%; animation: animate 7s linear infinite; } .wrapper div:nth-child(6) { top: 90%; left: 10%; animation: animate 9s linear infinite; } .wrapper div:nth-child(7) { top: 30%; left: 60%; animation: animate 5s linear infinite; } .wrapper div:nth-child(8) { top: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0