CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう

CSS3 でアニメーションを作成できることは誰もがよく知っていると思いますが、この機能を賢く使って美しいフォト ウォールを作成したことがありますか?

それでは、今日は CSS3 アニメーションの機能を使用して、美しいフォトウォールを一緒に作成してみましょう!

パート 1: HTML

ここでは、まずページに 10 枚の画像を配置します。 (素敵な写真があれば、ぜひ投稿してください!)

<div class="content">    <img  class="pic1 lazy"  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic2 lazy"  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic3 lazy"  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic4 lazy"  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic5 lazy"  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic6 lazy"  src="/static/imghwm/default1.png"  data-src="img/6.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic7 lazy"  src="/static/imghwm/default1.png"  data-src="img/7.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic8 lazy"  src="/static/imghwm/default1.png"  data-src="img/8.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic9 lazy"  src="/static/imghwm/default1.png"  data-src="img/9.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" >    <img  class="pic10 lazy"  src="/static/imghwm/default1.png"  data-src="img/10.jpg"  / alt="CSS3_html/css_WEB-ITnose で美しいフォトウォールを作成しましょう" > </div>

パート 2: CSS3

このセクションは、上の写真に示すように、写真の位置が異なります。 CSS3 に関する知識ポイント:

CSS3 回転

rotate

CSS3 スケーリング

scale

CSS3 シャドウ

box-shadow

はい、これらの関数を使用すると、美しいフォトウォールを作成できます。コードを見てみましょう。ここではコードの一部のみを示しています。賢い人はその方法を知っているはずです。

body{    background: url(../img/bg1.jpg) no-repeat top center fixed;    background-size: 100% auto;}.content{    width: 900px;     height: 1000px;    overflow: hidden;     margin: 100px auto;     position: relative;}img{     z-index: 1;    width: 20%;    height: auto;    position: absolute;    padding: 10px 10px 15px 10px;    background: #ffffff;    border: 1px solid #CCCCCC;    /* 动画的时间 */    -moz-transition: 0.5s;    -webkit-transition: 0.5s;    transition: 0.5s; }img:hover{    z-index: 2;    transform: scale(1.5);    -moz-transform: scale(1.5) ;    -webkit-transform: scale(1.5) ;    box-shadow: -10px 10px 20px #000000;    -moz-box-shadow: -10px 10px 20px #000000;    -webkit-box-shadow: -10px 10px 20px #000000;}.pic1{    left: 100px;    top: 50px;    -webkit-transform: rotate(20deg);    -moz-transform: rotate(20deg);    transform: rotate(20deg);}.pic2{    left: 280px;    top: 60px;    -webkit-transform: rotate(-10deg);    -moz-transform: rotate(-10deg);    transform: rotate(-10deg);}

/*   下面的代码大同小异就不依依展示了    */

就是这么简单的代码就可以实现上图所示的效果了。小伙伴们有兴趣的自己动手尝试一下把自己的靓照放上去看看。

PS: CSS3 では、さらに素晴らしくゴージャスなエフェクトを記述することもできます。興味があれば、詳しく勉強してみてください。

デモが必要な場合は、メッセージを残してください。今回はダウンロードできません。

私の QQ グループに参加して、グループ ファイルをダウンロードすることもできます。

クリックして参加