canvas天空粒子汇聚形成文字悬浮躲避交互效果代码
代码语言:html
所属分类:粒子
代码描述:canvas天空粒子汇聚形成文字悬浮躲避交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #000000; margin: 0; overflow: hidden; font-size: 0; } body section { background: url(//repo.bfw.wiki/bfwrepo/image/5e5ef0b278727.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100vw; height: 100vh; font-weight: 700; } body section canvas { width: 100vw; height: 100vh; } @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Raleway:300,400,900'); .coidea-header { position: fixed; display: block; width: 96%; width: calc( 100% - 32px ); height: 40px; margin: 0 auto; color: #3498db; text-align: center; top: 16px; right: 16px; left: 16px; z-index: 1000; } .coidea-header .coidea-links .coidea-icon-back { position: absolute; display: block; width: 24px; height: 24px; padding: 7px; color: rgba(255, 255, 255,0.75); font-size: 32px; line-height: 34px; font-weight: 900; font-family: 'Raleway', sans-serif; text-decoration: none; outline: 0px none; outline: 0px; transition: all .3s ease; top: 0px; left: 0px; z-index: 2; } .coidea-header .coidea-links .coidea-icon-back::before { content: ''; position: absolute; display: block; width: 34px; height: 34px; top: 7px; left: 20px; border-radius: 8px; background-color: rgba(255, 255, 255,.35); } .coidea-header .coidea-links .coidea-icon-back:hover { color: rgba(255, 255, 255,1); } .coidea-header .coidea-links .coidea-icon-github { position: absolute; display: block; width: 24px; height: 24px; padding: 7px; color: rgba(255, 255, 255,0.75); font-size: 32px; line-height: 34px; font-weight: 900; font-family: 'Raleway', sans-serif; text-decoration: none; outline: 0px none; outline: 0px; transition: all .3s ease; top: 0px; right: 0px; z-index: 2; } .coidea-header .coidea-links .coidea-icon-github::before { content: ''; position: absolute; display: block; width: 34px; height: 34px; top: 7px; right: 18px; border-radius: 8px; background-color: rgba(255, 255, 255,.35); } .coidea-header .coidea-links .coidea-icon-github:hover { color: rgba(255, 255, 255,1); } .coidea-header .coidea-links .coidea-header { font-family: 'Raleway', sans-serif; display: inline-block; font-size: 14px; font-weight: 300; margin: 0; padding: 17px 0; z-index: 1; } @media screen and (max-width: 360px) { .coidea-header .coidea-links .coidea-header { font-size: 12px; } } </style> </head> <body> <header class="coidea-header"> <div class="coidea-links"> <a class="coidea-icon-back" href="" title="返回下载页">C</a> <a class="coidea-icon-github" href="" target="_blank" title="">G</a> </div> </header> <section id="ci-particles"> <canvas id="canvas"></canvas> <h1 id="headline">BFW</h1> </section> <script> var canvas = document.querySelector("#canvas"), ctx.........完整代码请登录后点击上方下载按钮下载查看
网友评论0