ホームページ  >  記事  >  ウェブフロントエンド  >  純粋な Css3 手作り Web ページ画像効果

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

高洛峰
高洛峰オリジナル
2017-02-09 16:41:371673ブラウズ
  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. りー
  3. りー

    りー

    りー

    りー❤️

                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>
    纯Css3手工打造网页图片效果
                .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;
        }
  4. rrreええ
  5. 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);

    りーりー

    りー

    りーりーりーりーりーりーりーりーりーりーりーりーりーりーええるれぇrrreeerrreeerrreeerrreeerrreeerrreee ❤️
                -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サイト!
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。