three实现三维方块分解拆散过渡动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现三维方块分解拆散过渡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'> <style> a, a:focus, a:hover { color: #fff; } .btn-secondary, .btn-secondary:hover, .btn-secondary:focus { color: #333; text-shadow: none; background-color: #fff; border: .05rem solid #fff; } html, body { height: 100%; } body { display: flex; justify-content: center; color: #fff; text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); } .cover-container { max-width: 42em; } .masthead { margin-bottom: 2rem; } .masthead-brand { margin-bottom: 0; } .nav-masthead .nav-link { padding: .25rem 0; font-weight: 700; color: rgba(255, 255, 255, .5); background-color: transparent; border-bottom: .25rem solid transparent; } .nav-masthead .nav-link:hover, .nav-masthead .nav-link:focus { border-bottom-color: rgba(255, 255, 255, .25); } .nav-masthead .nav-link+.nav-link { margin-left: 1rem; } .nav-masthead .active { color: #fff; border-bottom-color: #fff; } @media (min-width: 48em) { .masthead-brand { float: left; } .nav-masthead { float: right; } } .cover { padding: 0 1.5rem; } .cover .btn-lg { padding: .75rem 1.25rem; font-weight: 700; } .mastfoot { color: rgba(255, 255, 255, .5); } #page { visibility: hidden; } #reveal-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /* transition: all 5s; */ } body { background: #fff; } body.loaded { background-color: #333333; box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); } body.loaded #page { visibility: visible; } body.loaded #reveal-effect { opacity: 1; } body.revealed #reveal-effect { display: none; } </style> </head> <body class="text-center"> <div id="page"> <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> <div class="inner"> <h3 class="masthead-brand">Reveal #1</h3> <nav class="nav nav-masthead justify-content-center"> <a class="nav-link active" href="#">Home</a> <a class="nav-link" href="" target="_blank">Codepen Profile</a> <a class="nav-link" href="" target="_blank">ThreeJS Collection</a> </nav> </div> </header> <main role="main" class="inner cover"> <h1 class="cover-heading">Simple 3D Reveal Effect</h1> <p class="lead">This simple effect is made with ThreeJS and TweenMax.</p> <p class="lead"> <a href="#" id="trigger" class="btn btn-lg btn-secondary">Trigger</a> </p> </main> <footer class="mastfoot mt-auto"> <div class="inner"> <p></p> </div> </footer> </div> </div> <canvas id="reveal-effect"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.108.js"></script> <scri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0