回答WAVE立川校卒業生へブログお問い合わせカレンダーcss3でmacのスクリーンセーバー風なものを作ってみましたコメントをどうぞ11/22の勉強会の議事録です。今回はmacのスクリーンセーバー風なものをcss3で作ってみました。完成形をご覧ください。↓screensaver-01それでは作成のポイントを説明致します。下のソースもあわせてお読み下さい。変形の基点1.htmlとbodyにheight:100%;を指定するwidthは特に指定をしなくても勝手に100%になってくれます。これで画面いっぱいに画像が表示されます。最近は大きなディスプレイを使っている方も多いので、画像が拡大された時の画像の荒れ対策をしてみます。1px)、残りの三つを透明にしてpng形式で保存します。いうの↓ここではこれをpattern.pngとしました。この画像を背景にリピートで敷きつめます。ここでは.bg:afterの背景画像にしています。repeat;網戸越しに画像を見る様な状態を作ることで、画像が拡大された時に画像が荒れて見えるのを防ぎます。背景画像をフルスクリーン表示させる方法です。背景画像の縦横比を保ちつつ、どの大きさの画面で見ても画面いっぱいに表示させることができる優れものです。アニメーション開始から10%までの間に徐々に画像が現れ、10%から30%の間に画像が表示され、30%から終了までに徐々に消えていく、という指定をしています。class=”photo”></div>このdivが画像の枚数分、4つあるだけです。このclass=”photo”にnth-child(1)(2)(3)(4)...と指定し、それぞれにanimation-delayを指定して徐々に画像が切り替わるようにします。ここでは一枚につき8秒×4枚=32秒で一回りする設定です。最初にクラスphotoにアニメーション全体長さの32秒を設定します。32s;次に各nth-childに何秒後から表示が始まるかを設定します。ここでは二番目に表示される画像に対してanimation-delay:-24s;と指定していますが、この様にマイナスの値も使えます。24秒前からアニメーションが始まっています、ということです。変形の基点tranceform-originプロパティは、2Dまたは3D変形を適用するときの変形の基点を指定します。ここでは4枚の画像を使っていますが、それぞれの画像に合わせて下から上へ、右から下へ...現れ、拡大しながら画像が切り替わります。ついてマルチメディアスクールWAVE立川校卒業。ネットで何でも学べる時代ですが、やはりライブで学ぶことに勝るものはありませんね。りんご結成時には活動拠点を探して東奔西走。運営、スケジュール管理をやっています。overflow:hidden、SVG、ライブトレース、流行り物(笑)、ねこ、幕末etc。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。DESIGNERの集まりです。ヘッダー画像をトップページにだけ表示させたい。