おはよーございます。
ねこです。
皆さん、キータ(Quiita)というプログラマのための情報交換サイト、ごぞんじですか?
ねこがjavascript始めた頃にとおぉ~ってもお世話になりました。
ねこは今日からの二週間、このなかの記事を一日一つ読んでいこうとおもいます。
恥ずかしながらねこはまだフレームワークなどというものにばっちり触れたことがありません。
なので、アメリカ一番人気のLaravelという記事を探して、これから勉強していこうと思います。
こちら、キータさまのサイトです。http://qiita.com/
皆さんも読んでみましょう!
それから、今ねこはウェブデザインの仕事もしています。
ありがたいことに日本の「クラウドワークス」というところで仲介していただいたお客様です。
そこで、こんな重宝なアニメーションのツールがあったので、ご紹介しておきます。
初めての方でもOK!
では、まず、こちらのサイト(http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps)を開いてhtmlとcssをコピー、そしてこちらのgifファイルを同じディレクトリに入れて呼び出せるようにします。
treehouse http://blog.teamtreehouse.com/
Guil Hernandez writes on July 14, 2014 参照
[html]
<div class="monster">div>
[css]
body { background: #24aecd;}.monster { width: 190px; height: 240px; margin: 2% auto; background: url('(あなたのgifファイルのディレクトリ)/monster.png') left center; animation: play .8s steps(10) infinite;}@keyframes play { 100% { background-position: -1900px; }}
[gif ファイルはこちらから]
http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png
必ず「保存」してくださいね。
どうですか?かんたんだったでしょう?うごきましたか?CSS3おそるべし!ですよね。
ねこでした。