ホームページ >ウェブフロントエンド >CSSチュートリアル >マウスが画像内に移動したときの CSS3 動的プロンプト効果

マウスが画像内に移動したときの CSS3 動的プロンプト効果

不言オリジナル: 2018-06-25 16:35:483007ブラウズ

この記事では、マウスが画像内に移動したときの CSS3 の動的プロンプト効果 (変換) を主に紹介します。内容が非常に優れているので、参考として共有します。

ブログを書くのは初めてです。間違いがあれば修正していただければ幸いです。今日は主に CSS3 の重要な属性であるtransformの使用法について書きます。以前MOOCで勉強しましたが、先生のレッスンの後、自分で入力しました。

1. はじめに

1. 変換とは何ですか?

transform の意味は次のとおりです: 変化、変形...; 変換の共通の属性は何ですか?

transform のプロパティには、translate()/rotate() / skew() /scale() /、それぞれ x と y (rotatex() やrotatey() など) が含まれます。

transform:translate()

意味: 変更、移動; たとえば、右に 20 ピクセルシフト、上に 50 ピクセルシフト (負の値は左と下に) 例は次のとおりです

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

transform:rotate()

意味: 回転; "deg" は回転の度合いです。たとえば、"180deg" は "180 度" の回転を意味します。例は次のとおりです。 ()

意味:傾き例は以下の通り

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

transform:scale()

意味:Ratio 1.8は3倍などの整数倍に拡大する場合に1.8の比率で拡大することを意味します。例は次のとおりです

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

3. 変換の例

demo01 説明: マウスを移動すると、画像が左に移動し、コンテンツが入力されます。シーケンス

手順:

1. HTML コードを記述し、CSS を通じてコンテンツと画像の初期スタイルを設定します (テキストコンテンツはすべて画像上にあります)。

3. 次に、transform 属性を使用して、コンテンツを左に移動するときのスタイルを設定します。距離は 0 (transform:translate(0,0)) です。transform:translate(0,0) は、主に 3 つのコンテンツを異なる時間遅延させて、順番に入力する効果を形成するために使用されます。

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

/*图片左移 文字依次进入*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}

.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(-5px,0);}

demo02 説明: マウスを移動すると、画像がぼやけ、長方形が画像の外側から画像内の指定された位置に回転します。テキストが右から飛んでいきます。徐々に表示します

手順:

1 .HTMLコードを記述し、CSSでコンテンツと画像の初期スタイルを設定します(長方形のテキストが画像上にあります)。非表示になるまでtransform属性を変更し、回転角度を0に設定します。transform:translate(0,-400px)rotate(0deg);

3. 次に、マウスが移動したときのスタイルの変位(:hover)を0に設定し、回転します。 360 度の変換:translate(0,0)rotate(360deg);

        <!--移动-->
        <figure class="test1">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
            </figcaption>
        </figure>

/*旋转*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption p{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}

demo03 説明: マウスを移動すると、歪んだ単語が正常に表示されます (テキストがこの例ではテキストが 90 度歪んでいるため、視覚的には見えません)

手順:

1. 適切な HTML コードを作成し、CSS を通じてコンテンツと画像の初期スタイルを設定します。度変換: skew(90deg);

3. 次に、マウスが移動したときのテキストのスタイルを設定します (:hover) コンテンツが歪みます 0 度変換: skew(0);

        <!--旋转-->
        <figure class="test2">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>飞来飞去</p>


                <p></p>
            </figcaption>
        </figure>

demo04 説明: マウスを移動すると、四角形とテキストが表示されて縮小され、画像も縮小されます

手順:

書き込み適切な HTML コードを使用し、次の初期スタイルを設定します。 CSS を使用してコンテンツと画像を 1.2 倍に拡大します。これは、マウスを移動した後に拡大率が 1 になったときに縮小効果を作成します。次に、コンテンツの透明度を 0 に設定します。、マウスを移動したときのスタイルコンテンツの拡大率 (:hover) を 1 に設定します。つまり、画像の元のサイズが縮小され、三目並べのグリッドが 1 になります

。

手順:

1. HTML コードを記述し、CSS を通じてコンテンツと画像の初期スタイルを設定します (三目並べは 2 つの長方形の重なりです)

2. 2 つの長方形を 0.8 縮小し、透明度を設定します。 0 に設定し、コンテンツの透明度を 0 に設定します。

3.接下来设置鼠标移入时(:hover)的样式内容透明度设置为1 设置矩形缩放为1 这里利用到transition属性主要是为了缩小放大过程逐渐变化;

/*井字格*/
.test5{background: #000;}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;}
.test5 figcaption p{margin-left: 18%;opacity: 0;}
.test5 figcaption p{position: absolute;}
.test5 figcaption p.p01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);}
.test5 figcaption p.p02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);}
.test5:hover p.p01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover p.p02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover figcaption p{opacity: 1;}
.test5:hover figcaption h2{opacity: 1;}
.test5:hover img{opacity: 0.6;}

        <!--井字格-->
        <figure class="test5">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p class="p01"></p>
                <p class="p02"></p>
            </figcaption>
        </figure>

以上是几个简单的小例子，之所以用figure和figcaption标签，主要是标签的语义化，截取动态图用到的是GifCam第一次用挺好用的很可爱哈哈。

figure标签主要是用于规定独立的流内容（图片，图表，照片，代码等）而figcaption与figure标签配套使用，主要用于定义figure元素的标题

哦，对了，由于这几个例子写在一个html里面所以提取出了部分公用的样式

body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";}
figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}
figcaption{position: absolute;top: 0;left: 0;color:#fff;}
figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}
figure figcaption p,h2,span,p{transition: all 0.35s}
@media screen and (max-width: 600px) {
    figure{width: 100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
    figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
    figure{width: 33.33%;}
}

总结：

之所以选择写博客主要是为了锻炼自己的表达能力，培养一个总结知识点的好习惯，以前看别人写的一些好的文章时都很羡慕，自己却总是不知道从何下手，直到最近投简历的时候发现很多公司都要求注明自己的博客地址，所以有必要逼着自己写一下东西啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

マウスが画像内に移動したときの CSS3 動的プロンプト効果

関連記事