heart royliu Follow 2012-04-24 09:55:32 License: MIT License Fork2 Fav0 View632 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 6 lines CSS 77 lines heart <div id="background"></div> <div id="chest"> <div class="heart left side top"></div> <div class="heart center">♥</div> <div class="heart right side"></div> </div> heart @-webkit-keyframes beat { 0% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);} 50% {-webkit-transform: scale(1.1) rotate(225deg); -webkit-box-shadow:0 0 70px rgba(213,9,60,0.6);} 100% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);} } @-moz-keyframes beat { 0% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);} 50% {-moz-transform: scale(1.1) rotate(225deg); -moz-box-shadow:0 0 70px rgba(213,9,60,0.6);} 100% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);} } @keyframes beat { 0% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;} 50% {transform: scale(1.1) rotate(225deg); box-shadow:0 0 70px #d5093c;} 100% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;} } #background { position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background: #ffa5a5; background: -moz-linear-gradient(top, #ffa5a5 0%, #ffd3d3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa5a5), color-stop(100%,#ffd3d3)); background: -webkit-linear-gradient(top, #ffa5a5 0%,#ffd3d3 100%); background: linear-gradient(top, #ffa5a5 0%,#ffd3d3 100%); } #chest { position:relative; width:500px; height:450px; margin:0 auto; } .heart { position:absolute; z-index:2; background: -moz-linear-gradient(-180deg, #F50A45 0%, #d5093c 40%); background: -webkit-gradient(linear, right 50%, left 50%, color-stop(0%,#F50A45), color-stop(40%,#d5093c)); background: -webkit-linear-gradient(-180deg, #F50A45 0%,#d5093c 40%); background: linear-gradient(-180deg, #F50A45 0%,#d5093c 40%); -webkit-animation: beat 0.7s ease 0s infinite normal; -moz-animation: beat 0.7s ease 0s infinite normal; animation: beat 0.7s ease 0s infinite normal; } .heart.center { background: -moz-linear-gradient(-45deg, #B80734 0%, #d5093c 40%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#B80734), color-stop(40%,#d5093c)); background: -webkit-linear-gradient(-45deg, #B80734 0%,#d5093c 40%); background: linear-gradient(-45deg, #B80734 0%,#d5093c 40%); } .heart.top { z-index:3; } .side { top:50px; width:220px; height:220px; -moz-border-radius: 220px; -webkit-border-radius: 220px; border-radius: 220px; } .center { width:210px; height:210px; bottom:100px; left:145px; font-size:0; text-indent:-9999px; } .left { left:62px; } .right { right:62px; } <div id="background"></div> <div id="chest"> <div class="heart left side top"></div> <div class="heart center">♥</div> <div class="heart right side"></div> </div> @-webkit-keyframes beat { 0% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);} 50% {-webkit-transform: scale(1.1) rotate(225deg); -webkit-box-shadow:0 0 70px rgba(213,9,60,0.6);} 100% {-webkit-transform: scale(1) rotate(225deg); -webkit-box-shadow:0 0 40px rgba(213,9,60,1);} } @-moz-keyframes beat { 0% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);} 50% {-moz-transform: scale(1.1) rotate(225deg); -moz-box-shadow:0 0 70px rgba(213,9,60,0.6);} 100% {-moz-transform: scale(1) rotate(225deg); -moz-box-shadow:0 0 40px rgba(213,9,60,1);} } @keyframes beat { 0% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;} 50% {transform: scale(1.1) rotate(225deg); box-shadow:0 0 70px #d5093c;} 100% {transform: scale(1) rotate(225deg); box-shadow:0 0 40px #d5093c;} } #background { position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background: #ffa5a5; background: -moz-linear-gradient(top, #ffa5a5 0%, #ffd3d3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa5a5), color-stop(100%,#ffd3d3)); background: -webkit-linear-gradient(top, #ffa5a5 0%,#ffd3d3 100%); background: linear-gradient(top, #ffa5a5 0%,#ffd3d3 100%); } #chest { position:relative; width:500px; height:450px; margin:0 auto; } .heart { position:absolute; z-index:2; background: -moz-linear-gradient(-180deg, #F50A45 0%, #d5093c 40%); background: -webkit-gradient(linear, right 50%, left 50%, color-stop(0%,#F50A45), color-stop(40%,#d5093c)); background: -webkit-linear-gradient(-180deg, #F50A45 0%,#d5093c 40%); background: linear-gradient(-180deg, #F50A45 0%,#d5093c 40%); -webkit-animation: beat 0.7s ease 0s infinite normal; -moz-animation: beat 0.7s ease 0s infinite normal; animation: beat 0.7s ease 0s infinite normal; } .heart.center { background: -moz-linear-gradient(-45deg, #B80734 0%, #d5093c 40%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#B80734), color-stop(40%,#d5093c)); background: -webkit-linear-gradient(-45deg, #B80734 0%,#d5093c 40%); background: linear-gradient(-45deg, #B80734 0%,#d5093c 40%); } .heart.top { z-index:3; } .side { top:50px; width:220px; height:220px; -moz-border-radius: 220px; -webkit-border-radius: 220px; border-radius: 220px; } .center { width:210px; height:210px; bottom:100px; left:145px; font-size:0; text-indent:-9999px; } .left { left:62px; } .right { right:62px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author royliu 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/srwf/js"></script> css Discussion Questions on this code? Tags css Forked sort by latest page views favorite forked forked: heart secretgspot 00 157 2/6/77 css forked: heart secretgspot 00 169 2/6/77 css
