CSS3のアニメーションや回転機能を使用して、カードをぺろっと裏返すエフェクトを実装するスタイルシートを紹介します。
CSS3のアニメーションや回転機能を使用して、カードをぺろっと裏返すエフェクトを実装するスタイルシートを紹介します。
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上:垂直くるっ、下:水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル:表</h2></div> <div class="flipped"><h2>パネル:裏</h2></div> </div> </div> 水平にくるっ <div class="fl
最近は点滅を使用しているサイトを見かけることはありませんが、まだまだ使う点滅。これをCSS3のアニメーションを使って表現します。 marqueeを使った表現 HTMLタグで点滅 <marquee scrolldelay="300" scrollamount="600" width="600">HTMLタグで点滅</marquee> 以前はこんな感じにmarqueeタグを使って、scrollamountとwidthの値を同じにすることにより、点滅を表現できていました。 これをCSS3のアニメーションを使って表現してみます。 デモ CSS3アニメーションで点滅 滑らかに点滅させることができます。 .switch { -webkit-animation: switchtext 0.5s infinite alternate; -moz-animation: switchtext 0.5s inf
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く