Daily CSS Images 45 - Moon Maran.Emil Follow 2017-10-08 06:40:06 License: MIT License Fork0 Fav0 View188 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 0 lines HTML 18 lines CSS 243 lines Daily CSS Images 45 - Moon A PEN BY Victoria Ninni Bergquist https://codepen.io/vicbergquist/pen/JrrGNQ Daily CSS Images 45 - Moon <!-- DAILY CSS IMAGES 45 - MOON--> <div class="moon"> <div class="craters"></div> <div class="eye-left"></div> <div class="eye-right"></div> </div> <div class="stars"> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div> <!--a(href='' target='blank'): .watchme span i.fa.fa-youtube-play p watch me code this --> Daily CSS Images 45 - Moon * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } /* COLORS */ /* MIXINS */ * { box-sizing: border-box; } body, html { height: 100%; width: 100%; background: -webkit-linear-gradient(315deg, #090D23, #0B0F2B); } .moon .craters::before, .moon .craters::after { position: absolute; display: block; content: ""; background: #BFBFBF; box-shadow: inset 2px 0 #9E9E9E; border-radius: 50%; } .moon { position: relative; top: 25%; margin: auto; height: 100px; width: 100px; background: #EAEAEA; border-radius: 50%; box-shadow: inset -15px 0 6px #BFBFBF, 0 0 8px #EAEAEA; animation: floating 5s linear infinite 0 forwards; z-index: 10; } .moon .craters { position: absolute; top: 20%; left: 20%; height: 20%; width: 20%; background: #BFBFBF; border-radius: 50%; box-shadow: inset -1px 0 1px #9E9E9E; opacity: 0.4; } .moon .craters::before { top: -8px; right: -25px; height: 15px; width: 15px; box-shadow: inset -1px 0 1px #9E9E9E; } .moon .craters::after { top: 30px; left: 30px; height: 10px; width: 10px; box-shadow: inset -1px 0 1px #9E9E9E; } .eye-left, .eye-right { position: absolute; bottom: 30%; height: 15%; width: 9%; background: #333; border-radius: 50%; animation: blink 4s linear infinite 0; } .eye-left::before, .eye-right::before { position: absolute; display: block; content: ""; top: 1px; right: 2px; height: 4px; width: 2px; background: #EAEAEA; border-radius: 50%; } .eye-left { left: 10%; } .eye-right { bottom: 25%; left: 30%; } .stars .top, .stars .top::before, .stars .top::after, .stars .left, .stars .left::before, .stars .left::after, .stars .bottom, .stars .bottom::before, .stars .bottom::after, .stars .right { background: #EFE894; border-radius: 50%; box-shadow: 0 0 5px 1px #EFE894; animation: glow 5s linear infinite; } .stars { position: absolute; top: 20%; left: calc((100% - 300px)/2); height: 200px; width: 300px; } .stars .top { position: absolute; top: 0; left: 10%; height: 3px; width: 3px; box-shadow: 0 0 5px #EFE894; } .stars .top::before { position: absolute; display: block; content: ""; top: 10px; left: 150px; height: 4px; width: 4px; } .stars .top::after { position: absolute; display: block; content: ""; top: 2px; left: 90px; height: 3px; width: 3px; } .stars .left { position: absolute; top: 20%; left: 15%; height: 4px; width: 4px; box-shadow: 0 0 5px #EFE894; } .stars .left::before { position: absolute; display: block; content: ""; top: 53px; left: -12px; height: 3px; width: 3px; } .stars .left::after { position: absolute; display: block; content: ""; top: -10px; left: 40px; height: 3px; width: 3px; } .stars .bottom { position: absolute; bottom: 20%; right: 28%; height: 3px; width: 3px; box-shadow: 0 0 5px #EFE894; } .stars .bottom::before { position: absolute; display: block; content: ""; height: 4px; width: 4px; bottom: 35px; right: -10px; } .stars .bottom::after { position: absolute; display: block; content: ""; height: 3px; width: 3px; top: 10px; right: 80px; } .stars .right { position: absolute; bottom: 25%; right: 10%; height: 5px; width: 5px; } @keyframes blink { 5%,10% { height: 1px; } 10% { height: 15%; } } @keyframes floating { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(2px) translateX(1px); -moz-transform: translateY(2px) translateX(1px); -ms-transform: translateY(2px) translateX(1px); transform: translateY(2px) translateX(1px); box-shadow: inset -20px 0 20px #BFBFBF, 0 0 8px #EAEAEA; } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @keyframes glow { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } Daily CSS Images 45 - Moon A PEN BY Victoria Ninni Bergquist https://codepen.io/vicbergquist/pen/JrrGNQ <!-- DAILY CSS IMAGES 45 - MOON--> <div class="moon"> <div class="craters"></div> <div class="eye-left"></div> <div class="eye-right"></div> </div> <div class="stars"> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div> <!--a(href='' target='blank'): .watchme span i.fa.fa-youtube-play p watch me code this --> * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } /* COLORS */ /* MIXINS */ * { box-sizing: border-box; } body, html { height: 100%; width: 100%; background: -webkit-linear-gradient(315deg, #090D23, #0B0F2B); } .moon .craters::before, .moon .craters::after { position: absolute; display: block; content: ""; background: #BFBFBF; box-shadow: inset 2px 0 #9E9E9E; border-radius: 50%; } .moon { position: relative; top: 25%; margin: auto; height: 100px; width: 100px; background: #EAEAEA; border-radius: 50%; box-shadow: inset -15px 0 6px #BFBFBF, 0 0 8px #EAEAEA; animation: floating 5s linear infinite 0 forwards; z-index: 10; } .moon .craters { position: absolute; top: 20%; left: 20%; height: 20%; width: 20%; background: #BFBFBF; border-radius: 50%; box-shadow: inset -1px 0 1px #9E9E9E; opacity: 0.4; } .moon .craters::before { top: -8px; right: -25px; height: 15px; width: 15px; box-shadow: inset -1px 0 1px #9E9E9E; } .moon .craters::after { top: 30px; left: 30px; height: 10px; width: 10px; box-shadow: inset -1px 0 1px #9E9E9E; } .eye-left, .eye-right { position: absolute; bottom: 30%; height: 15%; width: 9%; background: #333; border-radius: 50%; animation: blink 4s linear infinite 0; } .eye-left::before, .eye-right::before { position: absolute; display: block; content: ""; top: 1px; right: 2px; height: 4px; width: 2px; background: #EAEAEA; border-radius: 50%; } .eye-left { left: 10%; } .eye-right { bottom: 25%; left: 30%; } .stars .top, .stars .top::before, .stars .top::after, .stars .left, .stars .left::before, .stars .left::after, .stars .bottom, .stars .bottom::before, .stars .bottom::after, .stars .right { background: #EFE894; border-radius: 50%; box-shadow: 0 0 5px 1px #EFE894; animation: glow 5s linear infinite; } .stars { position: absolute; top: 20%; left: calc((100% - 300px)/2); height: 200px; width: 300px; } .stars .top { position: absolute; top: 0; left: 10%; height: 3px; width: 3px; box-shadow: 0 0 5px #EFE894; } .stars .top::before { position: absolute; display: block; content: ""; top: 10px; left: 150px; height: 4px; width: 4px; } .stars .top::after { position: absolute; display: block; content: ""; top: 2px; left: 90px; height: 3px; width: 3px; } .stars .left { position: absolute; top: 20%; left: 15%; height: 4px; width: 4px; box-shadow: 0 0 5px #EFE894; } .stars .left::before { position: absolute; display: block; content: ""; top: 53px; left: -12px; height: 3px; width: 3px; } .stars .left::after { position: absolute; display: block; content: ""; top: -10px; left: 40px; height: 3px; width: 3px; } .stars .bottom { position: absolute; bottom: 20%; right: 28%; height: 3px; width: 3px; box-shadow: 0 0 5px #EFE894; } .stars .bottom::before { position: absolute; display: block; content: ""; height: 4px; width: 4px; bottom: 35px; right: -10px; } .stars .bottom::after { position: absolute; display: block; content: ""; height: 3px; width: 3px; top: 10px; right: 80px; } .stars .right { position: absolute; bottom: 25%; right: 10%; height: 5px; width: 5px; } @keyframes blink { 5%,10% { height: 1px; } 10% { height: 15%; } } @keyframes floating { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(2px) translateX(1px); -moz-transform: translateY(2px) translateX(1px); -ms-transform: translateY(2px) translateX(1px); transform: translateY(2px) translateX(1px); box-shadow: inset -20px 0 20px #BFBFBF, 0 0 8px #EAEAEA; } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @keyframes glow { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Daily CSS Images 45 - Moon A PEN BY Victoria Ninni Bergquist https://codepen.io/vicbergquist/pen/JrrGNQ Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Maran.Emil 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/yuDq6/js"></script> css html5_elements&api Discussion Questions on this code? Tags css html5_elements&api