three+vanta.waves+birds+fog+dots+clouds+halo实现三维波浪光环云雾小鸟点状效果代码
代码语言:html
所属分类:三维
代码描述:three+vanta.waves+birds+fog+dots+clouds+halo实现三维波浪光环云雾小鸟点状效果代码
代码标签: three vanta waves birds fog dots clouds halo 三维 波浪
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.1.2.css"> <style> @import url("https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto"); * { padding: 0; margin: 0; } #vantajs-bg { position: absolute; z-index: -1; width: 100%; height: 100%; } .container { width: 100%; height: 100vh; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container h2 { font-size: 4em; font-family: "Montserrat", sans-serif; color: #FFFFFF; text-shadow: 1px 1px #D37E86; } .container p { font-size: 1.5em; font-family: "Nunito Sans", sans-serif; color: #FFFFFF; text-shadow: 1px 1px #070707; margin-bottom: 0.5rem; } .container select { width: 200px; } footer { width: 100%; background: rgba(0, 0, 0, 0.2); position: absolute; bottom: 0; right: 5px; text-align: right; font-size: 0.6em; text-transform: uppercase; letter-spacing: 2px; font-family: "Roboto", sans-serif; color: #FFFFFF; padding: 0.5rem; } footer p { border: none; padding: 0; } footer p strong { font-size: 2em; text-decoration: none; } footer p strong:hover { color: #cd6b74; transition: all 0.4s ease-in-out; font-weight: 1500; font-size: 2em; cursor: pointer; } footer a { color: #ffffff; text-decoration: none; transition: all 0.4s ease-in-out; } footer a:hover { color: #D37E86; font-weight: 900; font-size: 1.1em; } </style> </head> <body > <div id="vantajs-bg"></div> <div class="container"> <h2> Vanta JS</h2> <p>Demonstration of Vant.........完整代码请登录后点击上方下载按钮下载查看
网友评论0