CSSで必殺技！ edo_m18 Follow 2011-11-25 17:56:32 License: MIT License Fork101 Fav0 View6845 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 53 lines HTML 11 lines CSS 130 lines CSSで必殺技！ jQuery v1.6.2 $(function () { /** * Atttack button. */ $('#attack').click(function () { var randomPos = (Math.random() * 20) << 0; $('<div class="effect1" />').css('margin-top', randomPos).appendTo('.effect'); _randomStar(); $('#enemy').addClass('start'); }); /** * Effect events. */ $('.effect1').live('animationend webkitAnimationEnd mozAnimationEnd', function () { $(this).remove(); }); $('#enemy').bind('animationend webkitAnimationEnd mozAnimationEnd', function () { $(this).removeClass('start').addClass('end'); }); /////////////////////////////////// function _randomStar() { var stars = [], x, y, random = Math.random, max = 10; while(max--) { x = (random() * 250 << 0) + 90; y = (random() * 270 << 0) + 30; stars.push( _createStar().css({ 'left': x, 'top': y }).appendTo('.effect') ); } } function _createStar() { var $star = $('<div class="effect2" />').bind('animationend webkitAnimationEnd mozAnimationEnd', function () { $(this).remove(); }); return $star; } }); <div id="stage"> <div id="enemy"> <img src="http://jsdo-it-static-contents.s3.amazonaws.com/assets/b/T/V/2/bTV2w.png" alt="" /> <!-- /#enemy --></div> <div class="effect"> <!-- /.effect --></div> <div id="ctrl"> <button id="attack">攻撃！</button> </div> <!-- /#stage --></div> CSSで必殺技！ body, div, p { margin: 0; padding: 0; } #stage { position: relative; width: 442px; height: 402px; padding: 20px 0; border: solid 1px #111; background: url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/e/e/Y/k/eeYkn.jpg) left top no-repeat; text-align: center; } #ctrl { margin-top: 30px; } #enemy { } #enemy.start { -webkit-animation: damage 1s 1 ease-in-out; -moz-animation: damage 1s 1 ease-in-out; -ms-animation: damage 1s 1 ease-in-out; -o-animation: damage 1s 1 ease-in-out; animation: damage 1s 1 ease-in-out; } .effect1 { position: absolute; left: 50%; top: 0; width: 3px; height: 400px; opacity: 0; background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.4, rgba(255, 255, 255, 0.9)), color-stop(0.6, rgba(255, 255, 255, 0.9)), color-stop(1, rgba(255, 255, 255, 0))); background-size: 1px 0; background-repeat: no-repeat; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: slice 0.7s 1 ease-in-out; -moz-animation: slice 0.7s 1 ease-in-out; -ms-animation: slice 0.7s 1 ease-in-out; -o-animation: slice 0.7s 1 ease-in-out; animation: slice 0.7s 1 ease-in-out; } .effect2 { position: absolute; width: 1em; height: 1em; -webkit-animation: rolling 0.2s 4 linear; -moz-animation: rolling 0.2s 4 linear; -ms-animation: rolling 0.2s 4 linear; -o-animation: rolling 0.2s 4 linear; animation: rolling 0.2s 4 linear; } .effect2:after { content: "★"; position: absolute; left: 0; top: 0; color: #ffc; text-shadow: 0 0 5px rgba(255, 255, 200, 0.7), 0 0 5px rgba(255, 255, 200, 0.7); line-height: 1; } /** * --------------------------------------------------- * Definition of animation. * --------------------------------------------------- */ @-webkit-keyframes slice { 0% { opacity: 1; background-size: 1px 0; } 50% { opacity: 1; background-size: 1px 200px; } 100% { opacity: 1; background-size: 1px 0; background-position: 0 100%; } } @-webkit-keyframes rolling { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes damage { 0% { -webkit-transform: translate(1px, 1px); } 10% { -webkit-transform: translate(1px, 1px); } 11% { -webkit-transform: translate(-1px, -1px); } 20% { -webkit-transform: translate(-1px, -1px); } 21% { -webkit-transform: translate(1px, -1px); } 30% { -webkit-transform: translate(1px, -1px); } 31% { -webkit-transform: translate(1px, 0px); } 40% { -webkit-transform: translate(1px, 0px); } 41% { -webkit-transform: translate(-1px, 1px); } 50% { -webkit-transform: translate(-1px, 1px); } 51% { -webkit-transform: translate(0px, 1px); } 60% { -webkit-transform: translate(0px, 1px); } 61% { -webkit-transform: translate(1px, 2px); } 70% { -webkit-transform: translate(1px, 2px); } 71% { -webkit-transform: translate(-1px, 0px); } 80% { -webkit-transform: translate(-1px, 0px); } 81% { -webkit-transform: translate(1px, -1px); } 90% { -webkit-transform: translate(1px, -1px); } 91% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 0px); } } $(function () { /** * Atttack button. */ $('#attack').click(function () { var randomPos = (Math.random() * 20) << 0; $('<div class="effect1" />').css('margin-top', randomPos).appendTo('.effect'); _randomStar(); $('#enemy').addClass('start'); }); /** * Effect events. */ $('.effect1').live('animationend webkitAnimationEnd mozAnimationEnd', function () { $(this).remove(); }); $('#enemy').bind('animationend webkitAnimationEnd mozAnimationEnd', function () { $(this).removeClass('start').addClass('end'); }); /////////////////////////////////// function _randomStar() { var stars = [], x, y, random = Math.random, max = 10; while(max--) { x = (random() * 250 << 0) + 90; y = (random() * 270 << 0) + 30; stars.push( _createStar().css({ 'left': x, 'top': y }).appendTo('.effect') ); } } function _createStar() { var $star = $('<div class="effect2" />').bind('animationend webkitAnimationEnd mozAnimationEnd', function () { $(this).remove(); }); return $star; } }); <div id="stage"> <div id="enemy"> <img src="http://jsdo-it-static-contents.s3.amazonaws.com/assets/b/T/V/2/bTV2w.png" alt="" /> <!-- /#enemy --></div> <div class="effect"> <!-- /.effect --></div> <div id="ctrl"> <button id="attack">攻撃！</button> </div> <!-- /#stage --></div> body, div, p { margin: 0; padding: 0; } #stage { position: relative; width: 442px; height: 402px; padding: 20px 0; border: solid 1px #111; background: url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/e/e/Y/k/eeYkn.jpg) left top no-repeat; text-align: center; } #ctrl { margin-top: 30px; } #enemy { } #enemy.start { -webkit-animation: damage 1s 1 ease-in-out; -moz-animation: damage 1s 1 ease-in-out; -ms-animation: damage 1s 1 ease-in-out; -o-animation: damage 1s 1 ease-in-out; animation: damage 1s 1 ease-in-out; } .effect1 { position: absolute; left: 50%; top: 0; width: 3px; height: 400px; opacity: 0; background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.4, rgba(255, 255, 255, 0.9)), color-stop(0.6, rgba(255, 255, 255, 0.9)), color-stop(1, rgba(255, 255, 255, 0))); background-size: 1px 0; background-repeat: no-repeat; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: slice 0.7s 1 ease-in-out; -moz-animation: slice 0.7s 1 ease-in-out; -ms-animation: slice 0.7s 1 ease-in-out; -o-animation: slice 0.7s 1 ease-in-out; animation: slice 0.7s 1 ease-in-out; } .effect2 { position: absolute; width: 1em; height: 1em; -webkit-animation: rolling 0.2s 4 linear; -moz-animation: rolling 0.2s 4 linear; -ms-animation: rolling 0.2s 4 linear; -o-animation: rolling 0.2s 4 linear; animation: rolling 0.2s 4 linear; } .effect2:after { content: "★"; position: absolute; left: 0; top: 0; color: #ffc; text-shadow: 0 0 5px rgba(255, 255, 200, 0.7), 0 0 5px rgba(255, 255, 200, 0.7); line-height: 1; } /** * --------------------------------------------------- * Definition of animation. * --------------------------------------------------- */ @-webkit-keyframes slice { 0% { opacity: 1; background-size: 1px 0; } 50% { opacity: 1; background-size: 1px 200px; } 100% { opacity: 1; background-size: 1px 0; background-position: 0 100%; } } @-webkit-keyframes rolling { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes damage { 0% { -webkit-transform: translate(1px, 1px); } 10% { -webkit-transform: translate(1px, 1px); } 11% { -webkit-transform: translate(-1px, -1px); } 20% { -webkit-transform: translate(-1px, -1px); } 21% { -webkit-transform: translate(1px, -1px); } 30% { -webkit-transform: translate(1px, -1px); } 31% { -webkit-transform: translate(1px, 0px); } 40% { -webkit-transform: translate(1px, 0px); } 41% { -webkit-transform: translate(-1px, 1px); } 50% { -webkit-transform: translate(-1px, 1px); } 51% { -webkit-transform: translate(0px, 1px); } 60% { -webkit-transform: translate(0px, 1px); } 61% { -webkit-transform: translate(1px, 2px); } 70% { -webkit-transform: translate(1px, 2px); } 71% { -webkit-transform: translate(-1px, 0px); } 80% { -webkit-transform: translate(-1px, 0px); } 81% { -webkit-transform: translate(1px, -1px); } 90% { -webkit-transform: translate(1px, -1px); } 91% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 0px); } } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit http://jsdo.it/edo_m18/g5fN CSSで必殺技！ Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/g5fN/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/edo_m18/g5fN" title="CSSで必殺技！">CSSで必殺技！ - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Tags art&design html5_elements&api Forked sort new page view favorite forked forked: CSSで必殺技！ Jin.Xiao 00 5views 0/0/2 forked: CSSで必殺技！ nhki 00 15views 54/11/130 forked: CSSで必殺技！ mumoshu_hate.. 00 16views 56/11/130 forked: CSSで必殺技！ setong0202 00 10views 54/11/130 1 2 3 4 5 6 7 8 9 10NEXT>>
