純粋な Css3 手作り Web ページ画像効果

1. マウスオーバー、画像360度回転

   
   効果:

   
   

   コード:

   
   

   <style>

           .rotate-demo {

               width: 220px;

               height: 220px;

               margin: 0 auto;

   rrリー

               background: no-repeat url("images/author.jpg") left top;

               -webkit-background-size: 220px 220px;

               -moz-background-size: 220px 220px;

               background-size: 220px 220px;

               -webkit-border-radius: 110px;

   ❤️ 知識ポイント: CSS3のtransform属性は2Dまたは3Dを適用できます変換。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。 Z 軸に沿った DOM 要素の 3D 回転を実装するには、rotateZ(angle) に設定します。関連する設定には、rotate、rotate3d、rotateX、rotateY があります。 画像にカーソルを合わせると拡大します 効果:

   コード:
   りー

   りー
りー
2. りー

   りー

   りー

   りー❤️
   

               border-radius: 110px;

   
   

               -webkit-transition: -webkit-transform 2s ease-out;

               -moz-transition: -moz-transform 2s ease-out;

               -o-transition: -o-transform 2s ease-out;

   
   

               -ms-transition: -ms-transform 2s ease-out;

           }

    <br>

   

               .rotate-demo:hover {

                   -webkit-transform: rotateZ(360deg);

                   -moz-transform: rotateZ(360deg);

   
   

                   -o-transform: rotateZ(360deg);

                   -ms-transform: rotateZ(360deg);

                   transform: rotateZ(360deg);

   
   
   知識ポイント: DOM 要素の 2D スケーリング変換を実現するために、scale(x,y) を設定する CSS3 のtransform属性も使用されます。関連するものには、scale3d、scaleX、スケールY、スケールZ3D画像回転アルバムを実現エフェクト:コード:

               }

       </style>

    <br>

   <p class="rotate-demo"></p>

   rreeerreeerreee

   CSS3：

   rreee

   <style type="text/css">

       .img-container {

           background-color: #000;

           width: 220px;

           height: 220px;

           margin: 20px 50px;

       }

    <br>

       .img {

           -webkit-transform: scale(0.6);

           -moz-transform: scale(0.6);

           -o-transform: scale(0.6);

           -webkit-transition-duration: 0.5s;

           -moz-transition-duration: 0.5s;

   
   

           -o-transition-duration: 0.5s;

       }

rrreええ
3. rreee

   rreee

    <br>

           .img img {

   rreee

               padding: 1px;

   
   

               border-radius: 10px;

   ❤️

               border: 1px solid #fff;

           }

    <br>

           .img:hover {

   
   

               -webkit-transform: scale(0.8);

               -webkit-box-shadow: 0px 0px 30px #ccc;

               -moz-transform: scale(0.8);

   
   りーりー

   りー

   りーりーりーりーりーりーりーりーりーりーりーりーりーりーええるれぇｒｒｒｅｅｅｒｒｒｅｅｅｒｒｒｅｅｅｒｒｒｅｅｅｒｒｒｅｅｅｒｒｒｅｅｅ ❤️

               -moz-box-shadow: 0px 0px 30px #ccc;

               -o-transform: scale(0.8);

               -o-box-shadow: 0px 0px 30px #ccc;

           }

   </style>

    <br>

   HTML：

   知識ポイント: CSS3 のtransform属性とアニメーション属性に依存しており、Y軸に沿った要素の3D回転を定義するにはrotateYを使用し、Z軸に沿った要素の3D変換を定義するにはtranslateZを使用します。同時に、要素のアニメーション属性を設定してアニメーション効果を実現します。この記事では次のように定義されています:

   <p class="img-container">

   animation-name (バインドする必要があるキーフレーム名)セレクターへ): 回転アニメーション animation-duration (アニメーションが完了するまでにかかる時間): 20 秒 anime-iteration-count (アニメーションを再生する回数): 無限 (無限回) animation-timing-関数 (アニメーションの速度曲線): 線形 (アニメーションの速度は最初から最後まで同じです) より純粋な Css3 手作り Web ページの画像効果 関連記事については、PHP 中国語に注意してください。 Webサイト！