Now Loading1 GENKI Follow 2018-02-13 21:59:31 License: All rights reserved Fork0 Fav0 View448 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 0 lines HTML 17 lines SCSS 71 lines Now Loading1 Now Loading1 <div class="container"> <div class="animation-wrapper"> <ul class="animation"> <li class="animation__text">N</li> <li class="animation__text">o</li> <li class="animation__text">w</li> <li class="animation__text">L</li> <li class="animation__text">o</li> <li class="animation__text">a</li> <li class="animation__text">d</li> <li class="animation__text">i</li> <li class="animation__text">n</li> <li class="animation__text">g</li> <li class="animation__text">1</li> </ul> </div> </div> Now Loading1 YUI 3.3.0 CSS Reset @keyframes loading-animation { from { width: 0%; } to { width: 100%; } } @keyframes loaded-animation { from { height: 5%; } to { height: 100%; } } @keyframes loaded-fade-animation { 0% { opacity: 1.0; } 100% { opacity: 0.0; } } .animation-wrapper { position: absolute; top: 50%; left: 50%; width: 100%; height: 100vh; background: #000; transform: translate(-50%, -50%); overflow: hidden; &:before { position: absolute; top: 50%; left: 0px; content: ""; width: 0%; height: 5%; background: #fff; display: block; transform: translateY(-50%); animation: loading-animation 2.5s ease-in forwards, loaded-animation 0.3s 3.5s ease-out forwards; } .animation { position: absolute; top: 50%; left: 50%; width: auto; height: auto; transform: translate(-50%, -50%); perspective: 250; &__text { position: relative; top: 0px; left: 0px; font-size: 1em; font-weight: bold; color: #000; display: inline-block; vertical-align: top; animation: loaded-fade-animation 1.0s 3.5s ease-in-out forwards; } } } Now Loading1 <div class="container"> <div class="animation-wrapper"> <ul class="animation"> <li class="animation__text">N</li> <li class="animation__text">o</li> <li class="animation__text">w</li> <li class="animation__text">L</li> <li class="animation__text">o</li> <li class="animation__text">a</li> <li class="animation__text">d</li> <li class="animation__text">i</li> <li class="animation__text">n</li> <li class="animation__text">g</li> <li class="animation__text">1</li> </ul> </div> </div> @keyframes loading-animation { from { width: 0%; } to { width: 100%; } } @keyframes loaded-animation { from { height: 5%; } to { height: 100%; } } @keyframes loaded-fade-animation { 0% { opacity: 1.0; } 100% { opacity: 0.0; } } .animation-wrapper { position: absolute; top: 50%; left: 50%; width: 100%; height: 100vh; background: #000; transform: translate(-50%, -50%); overflow: hidden; &:before { position: absolute; top: 50%; left: 0px; content: ""; width: 0%; height: 5%; background: #fff; display: block; transform: translateY(-50%); animation: loading-animation 2.5s ease-in forwards, loaded-animation 0.3s 3.5s ease-out forwards; } .animation { position: absolute; top: 50%; left: 50%; width: auto; height: auto; transform: translate(-50%, -50%); perspective: 250; &__text { position: relative; top: 0px; left: 0px; font-size: 1em; font-weight: bold; color: #000; display: inline-block; vertical-align: top; animation: loaded-fade-animation 1.0s 3.5s ease-in-out forwards; } } } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Now Loading1 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author GENKI Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/GYhR/js"></script> animation art&design css html html5 user_interface Discussion Questions on this code? Tags animation art&design css html html5 user_interface