【UI】CSSアニメーション 点滅するボタン集 kingpanda Follow 2013-04-16 18:47:17 License: MIT License Fork2 Fav2 View12304 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 8 lines CSS 151 lines 点滅する各種ボタンです。 ※webkitのみしか使えません ※スマホでもキレイにみえます 【UI】CSSアニメーション 点滅するボタン集 <div id="wrapper"> <div class="btn flash">SAMPLE</div> <div class="btn flash2">SAMPLE</div> <div class="btn2 flash3">SAMPLE</div> <div class="btn flash4">SAMPLE</div> </div> <footer>kingpanda</footer> 【UI】CSSアニメーション 点滅するボタン集 * { margin: 0; padding: 0; border: 0; } body { background: #000; font: 30px sans-serif; } #wrapper{ width: 320px; background: #000; height:350px; margin:10px auto; padding-top:40px; } footer{ color:#FFF; font-weight:bold; text-align:center; font-size:16px; } .btn{ border: 2px solid #666; height: 40px; width: 80%; margin-top: 30px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; line-height: 40px; -webkit-border-radius: 20px; background: -webkit-linear-gradient(top, #7295b5 0%, #005081 47%, #147bb6 70%, #00abe5 94%, #02a8e4 100%); color: #FFF; position:relative; display:block; font-weight: bold; font-size: 18px; } .btn:before{ content:''; height: 19px; width: 95%; text-align: center; line-height: 40px; -webkit-border-radius: 40px; background: -webkit-linear-gradient(bottom, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 50%); display:block; position:absolute; top:1px; left:5px; opacity:0.3; } .btn2{ border: 1px solid #666; height: 40px; width: 80%; margin-top: 20px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; line-height: 40px; -webkit-border-radius: 20px; background: -webkit-linear-gradient(top, #7295b5 0%, #005081 47%, #147bb6 70%, #00abe5 94%, #02a8e4 100%); color: #FFF; font-weight: bold; font-size: 18px; display:block; } @-webkit-keyframes 'pulse' { 0%{ -webkit-box-shadow:2px 2px 4px rgba(255,255,255,0.2), 2px -2px 4px rgba(255,255,255,0.2), -2px 2px 4px rgba(255,255,255,0.2), -2px -2px 4px rgba(255,255,255,0.2); } 100%{ -webkit-box-shadow:3px 3px 5px rgba(255,255,255,1),3px -3px 5px rgba(255,255,255,1), -3px 3px 5px rgba(255,255,255,1), -3px -3px 5px rgba(255,255,255,1); } } .flash{ -webkit-animation-name: pulse; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; -webkit-animation-delay: 0s; } @-webkit-keyframes 'pulse2' { 0%{ opacity:0.2; } 100%{ opacity:1; } } .flash2{ -webkit-animation-name: pulse2; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; -webkit-animation-delay: 0s; } @-webkit-keyframes 'pulse3' { 0%{ -webkit-box-shadow: 0px 0px 0px rgba(000,000,000,0.5), inset 0px 40px 0px rgba(0,0,0,0.0); } 100%{ -webkit-box-shadow: 0px 0px 0px rgba(000,000,000,0.5), inset 0px 40px 0px rgba(0,0,0,0.8); } } .flash3{ -webkit-animation-name: pulse3; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; } @-webkit-keyframes 'pulse4' { 0%{ border:solid 2px #777; } 100%{ border:solid 2px #fff; } } .flash4{ -webkit-animation-name: pulse4; -webkit-animation-duration: 1.0s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; } 点滅する各種ボタンです。 ※webkitのみしか使えません ※スマホでもキレイにみえます <div id="wrapper"> <div class="btn flash">SAMPLE</div> <div class="btn flash2">SAMPLE</div> <div class="btn2 flash3">SAMPLE</div> <div class="btn flash4">SAMPLE</div> </div> <footer>kingpanda</footer> * { margin: 0; padding: 0; border: 0; } body { background: #000; font: 30px sans-serif; } #wrapper{ width: 320px; background: #000; height:350px; margin:10px auto; padding-top:40px; } footer{ color:#FFF; font-weight:bold; text-align:center; font-size:16px; } .btn{ border: 2px solid #666; height: 40px; width: 80%; margin-top: 30px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; line-height: 40px; -webkit-border-radius: 20px; background: -webkit-linear-gradient(top, #7295b5 0%, #005081 47%, #147bb6 70%, #00abe5 94%, #02a8e4 100%); color: #FFF; position:relative; display:block; font-weight: bold; font-size: 18px; } .btn:before{ content:''; height: 19px; width: 95%; text-align: center; line-height: 40px; -webkit-border-radius: 40px; background: -webkit-linear-gradient(bottom, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 50%); display:block; position:absolute; top:1px; left:5px; opacity:0.3; } .btn2{ border: 1px solid #666; height: 40px; width: 80%; margin-top: 20px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; line-height: 40px; -webkit-border-radius: 20px; background: -webkit-linear-gradient(top, #7295b5 0%, #005081 47%, #147bb6 70%, #00abe5 94%, #02a8e4 100%); color: #FFF; font-weight: bold; font-size: 18px; display:block; } @-webkit-keyframes 'pulse' { 0%{ -webkit-box-shadow:2px 2px 4px rgba(255,255,255,0.2), 2px -2px 4px rgba(255,255,255,0.2), -2px 2px 4px rgba(255,255,255,0.2), -2px -2px 4px rgba(255,255,255,0.2); } 100%{ -webkit-box-shadow:3px 3px 5px rgba(255,255,255,1),3px -3px 5px rgba(255,255,255,1), -3px 3px 5px rgba(255,255,255,1), -3px -3px 5px rgba(255,255,255,1); } } .flash{ -webkit-animation-name: pulse; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; -webkit-animation-delay: 0s; } @-webkit-keyframes 'pulse2' { 0%{ opacity:0.2; } 100%{ opacity:1; } } .flash2{ -webkit-animation-name: pulse2; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; -webkit-animation-delay: 0s; } @-webkit-keyframes 'pulse3' { 0%{ -webkit-box-shadow: 0px 0px 0px rgba(000,000,000,0.5), inset 0px 40px 0px rgba(0,0,0,0.0); } 100%{ -webkit-box-shadow: 0px 0px 0px rgba(000,000,000,0.5), inset 0px 40px 0px rgba(0,0,0,0.8); } } .flash3{ -webkit-animation-name: pulse3; -webkit-animation-duration: 0.8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; } @-webkit-keyframes 'pulse4' { 0%{ border:solid 2px #777; } 100%{ border:solid 2px #fff; } } .flash4{ -webkit-animation-name: pulse4; -webkit-animation-duration: 1.0s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? 点滅する各種ボタンです。 ※webkitのみしか使えません ※スマホでもキレイにみえます Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author kingpanda URLhttp://kingpanda.me 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/cfh1/js"></script> css library&test smartphones&tablets user_interface Discussion Questions on this code? Tags css library&test smartphones&tablets user_interface Favorite by zmys_ typista Forked sort by latest page views favorite forked forked: 【UI】CSSアニメーション 点滅するボタン hata 00 844 2/8/151 css library&test smartphones&tablets user_interface forked: 【UI】CSSアニメーション 点滅するボタン eiji_sm 12 2237 2/8/144 css library&test smartphones&tablets user_interface
