MPXVM CSS Animation for Video V4 Maran.Emil Follow 2017-10-10 02:30:19 License: MIT License Fork0 Fav0 View285 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 1 lines HTML 11 lines CSS 127 lines MPXVM CSS Animation for Video V4 References: http://jsdo.it/Satoh_D/jozU http://www.colorzilla.com/gradient-editor/ MPXVM CSS Animation for Video V4 //document.getElementById('helloWorld').innerHTML = 'Hello, World!'; <div class="mod-hex"> <div class="mod-hex-in"> MPXVM <br> FUMIX </div> </div> <!-- http://jsdo.it/Satoh_D/jozU --> MPXVM CSS Animation for Video V4 * { margin: 0; padding: 0; border: 0; } .mod-hex { background-color: #16a6b6; margin: 100px; height: 110px; position: relative; width: 190px; margin-top: 15%; margin-left: 40%; animation: draw-hexagon 5s infinite; transform-origin: 50% 50%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffaf4b+0,ff920a+100;Orange+3D+%231 */ background: #ffaf4b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffaf4b 0%, #ff920a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #ffaf4b 0%,#ff920a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #ffaf4b 0%,#ff920a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .mod-hex:before, .mod-hex:after { background-color: #16a6b6; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffaf4b+0,ff920a+100;Orange+3D+%231 */ background: #ffaf4b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffaf4b 0%, #ff920a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #ffaf4b 0%,#ff920a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #ffaf4b 0%,#ff920a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .mod-hex:before { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .mod-hex:after { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } .mod-hex .mod-hex-in { display: inline-block; line-height: 55px; text-align: center; vertical-align: middle; width: 100%; font-size: 26px; font-weight: 900; color: #ffffff; text-shadow: 2px 2px #333333; } @keyframes draw-hexagon { from { stroke-dashoffset: -587; transform: rotate(0deg) } to { stroke-dashoffset: 0; transform: rotate(360deg) } } .fil1 { animation: rotate-circle 5s infinite; transform-origin: 50% 50%; } body{ background: #2980b9 url('http://www.amazingwallpaperz.com/wp-content/uploads/Black-and-Yellow-Abstract-Widescreen-Background-Wallpaper1.jpg') repeat 0 0; -webkit-animation: 10s linear 0s normal none infinite animate; -moz-animation: 10s linear 0s normal none infinite animate; -ms-animation: 10s linear 0s normal none infinite animate; -o-animation: 10s linear 0s normal none infinite animate; animation: 10s linear 0s normal none infinite animate; } @-webkit-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-moz-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-ms-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-o-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } MPXVM CSS Animation for Video V4 References: http://jsdo.it/Satoh_D/jozU http://www.colorzilla.com/gradient-editor/ //document.getElementById('helloWorld').innerHTML = 'Hello, World!'; <div class="mod-hex"> <div class="mod-hex-in"> MPXVM <br> FUMIX </div> </div> <!-- http://jsdo.it/Satoh_D/jozU --> * { margin: 0; padding: 0; border: 0; } .mod-hex { background-color: #16a6b6; margin: 100px; height: 110px; position: relative; width: 190px; margin-top: 15%; margin-left: 40%; animation: draw-hexagon 5s infinite; transform-origin: 50% 50%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffaf4b+0,ff920a+100;Orange+3D+%231 */ background: #ffaf4b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffaf4b 0%, #ff920a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #ffaf4b 0%,#ff920a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #ffaf4b 0%,#ff920a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .mod-hex:before, .mod-hex:after { background-color: #16a6b6; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffaf4b+0,ff920a+100;Orange+3D+%231 */ background: #ffaf4b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffaf4b 0%, #ff920a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #ffaf4b 0%,#ff920a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #ffaf4b 0%,#ff920a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .mod-hex:before { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .mod-hex:after { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } .mod-hex .mod-hex-in { display: inline-block; line-height: 55px; text-align: center; vertical-align: middle; width: 100%; font-size: 26px; font-weight: 900; color: #ffffff; text-shadow: 2px 2px #333333; } @keyframes draw-hexagon { from { stroke-dashoffset: -587; transform: rotate(0deg) } to { stroke-dashoffset: 0; transform: rotate(360deg) } } .fil1 { animation: rotate-circle 5s infinite; transform-origin: 50% 50%; } body{ background: #2980b9 url('http://www.amazingwallpaperz.com/wp-content/uploads/Black-and-Yellow-Abstract-Widescreen-Background-Wallpaper1.jpg') repeat 0 0; -webkit-animation: 10s linear 0s normal none infinite animate; -moz-animation: 10s linear 0s normal none infinite animate; -ms-animation: 10s linear 0s normal none infinite animate; -o-animation: 10s linear 0s normal none infinite animate; animation: 10s linear 0s normal none infinite animate; } @-webkit-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-moz-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-ms-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-o-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? MPXVM CSS Animation for Video V4 References: http://jsdo.it/Satoh_D/jozU http://www.colorzilla.com/gradient-editor/ 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/CpI0/js"></script> css html5_elements&api Discussion Questions on this code? Tags css html5_elements&api
