「攻城戦記バハムートグリード」のマイページで、ぷよぷよはねる玉のボタンがあったので、それを参考にしてぷよぷよする玉をCSSで作ってみた。
今回作ったサンプル
http://jk0602.sakura.ne.jp/sample/jelly_ball/
ソースコード
http://jk0602.sakura.ne.jp/sample/jelly_ball/jelly_ball.zip
「攻城戦記バハムートグリード」のソースを見てみると、scaleの変化だけであのぷよぷよした感じを作っていた。。。使い方次第でこんな風にも表現できるんだなぁ～と感心しました。
index.html
<body>
<div class="content">
<div class="ball jelly"></div>
</div>
</body>
index.css
.ball{
position:absolute;
top:100px;
left: 110px;
width: 100px;
height: 100px;
border-radius:50px;
background: #FFF;
}
.jelly {
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: bottom center;
-webkit-animation-name: jelly;
}
@-webkit-keyframes jelly {
0% {-webkit-transform: scale(1, 1);}
8% {-webkit-transform: scale(1, 1);}
10% {-webkit-transform: scale(1.1, 0.9);}
13% {-webkit-transform: scale(0.9, 1.1);}
17.5% {-webkit-transform: scale(1, 1);}
19% {-webkit-transform: scale(1, 1);}
58% {-webkit-transform: scale(1, 1);}
60% {-webkit-transform: scale(1.1, 0.9);}
63% {-webkit-transform: scale(0.9, 1.1);}
67.5% {-webkit-transform: scale(1, 1);}
69% {-webkit-transform: scale(1, 1);}
100% {-webkit-transform: scale(1, 1);}
}