jotakiのブックマーク - はてなブックマーク

CSSでテキストを踊らせる。 - Qiita
<div class="text"> <span>C</span> <span>S</span> <span>S</span> <span>♪</span> </div> .text{ font-size: 3em; color: white; } .text span{ display: inline-block; animation: textAnim 1s linear infinite alternate; } @keyframes textAnim{ from{ transf orm-origin: left bottom; transf orm: rotate(-15deg); } to{ transf orm-origin: right bottom; transf orm: rotate(+15deg); } } ポイントはアニメーションで transf orm-originを変化
jotaki 2016/10/01
css
リンク
CSSで旋風を巻き起こす。 - Qiita
<div class="dust_devil"> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> <
jotaki 2016/06/14
animation
リンク
1

はてなブックマーク