Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image-tutoriel CSS-php.cn

Cet article présente principalement l'effet d'invite dynamique CSS3 (transformation) lorsque la souris se déplace dans l'image. Le contenu est plutôt bon. Je vais le partager avec vous maintenant et le donner comme référence.

C'est la première fois que j'essaie d'écrire un blog. J'espère que vous pourrez me corriger si j'ai des erreurs ou des erreurs. Aujourd'hui, j'écris principalement sur une certaine utilisation de la transformation, un attribut important de CSS3. proviennent de MOOC précédents, je l'ai tapé moi-même après avoir suivi un cours en ligne auprès d'un certain professeur.

1. Introduction

transformer signifie : changer, déformer...; transformer

2. Quels sont les attributs communs de la transformation ?

Les attributs de transform incluent : translate()/rotate() / skew() / scale() /, et ils sont divisés respectivement en x et y, tels que : rotatex() et rotatey (), Et ainsi de suite.

transform:translate()

Signification : changement, déplacement ; par exemple, décaler de 20 pixels vers la droite, décaler de 50 pixels vers le haut (valeurs négatives pour la gauche et le bas) Les exemples sont les suivants suit

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

Copier après la connexion

transform:rotate()

Signification : "deg" est le degré de rotation. 180deg" signifie une rotation de "180 degrés". Exemple comme suit

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

Copier après la connexion

transform:skew()

Signification : skew Les exemples sont les suivants suit

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

Copier après la connexion

transform:scale()

Signification : Le rapport 1,8 signifie un agrandissement à un rapport de 1,8 s'il s'agit d'un agrandissement. multiple entier, comme agrandir 3 fois, il doit être écrit sous la forme 3.0. Les exemples sont les suivants

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

Copier après la connexion

Exemple de transformation<. 🎜>

demo01 Description : Une fois la souris déplacée, l'image se déplace vers la gauche et le contenu entre dans l'ordre

Étapes :

1. Écrivez le code html et définissez le style initial du contenu et des images via CSS (le contenu du texte est sur l'image

2 .Déplacez le contenu de la description vers la gauche via la transformation) ; attribut jusqu'à ce qu'il ne soit plus visible (transform:translate(-600px,0););

3. Ensuite, définissez le style lorsque la souris se déplace (:hover). le contenu à gauche de 0 (transform:translate(0,0)). L'attribut transition-delay est utilisé ici principalement pour retarder les trois contenus pendant des temps différents afin de former l'effet d'entrée en séquence.

/*图片左移 文字依次进入*/
.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);}

Copier après la connexion

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

Copier après la connexion

demo02 Description : Une fois la souris déplacée, l'image devient floue et le rectangle tourne depuis l'extérieur de l'image. Entrez la position désignée dans l'image et le texte survolera depuis la droite et affichera progressivement

Étapes :

1. Écrivez le code html et définissez le contenu et le contenu via css Le style initial de l'image (le texte rectangulaire est tout sur l'image)

2 Déplacez le rectangle vers le haut via l'attribut de transformation ; jusqu'à ce qu'il soit invisible et définissez l'angle de rotation sur 0 transform: translation(0,-400px) rotate (0deg);

3 Ensuite, définissez le déplacement de style de (:hover) lorsque la souris se déplace sur. 0 et rotation à 360 degrés transformer : translate(0,0) rotate(360deg);

/*旋转*/
.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;}

Copier après la connexion

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


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

Copier après la connexion

demo03 Remarque : Les mots déformés s'affichent normalement après le déplacement de la souris (car ils sont déformés de 90 degrés dans l'exemple) Le texte ne peut donc pas être vu visuellement)

Étapes :

1. Écrivez le code html et définissez le style initial du contenu et des images via CSS ;

2. Déformez le contenu du texte de 90 degrés : skew(90deg);

3. Définissez ensuite le style lorsque la souris se déplace (:hover) et déformez le contenu du texte de 0 degré transform : skew( 0);

/*扭曲*/
.test3{background:#CCCCCC;}
.test3 figcaption{position: absolute;left:15%;top:15%}
.test3 figcaption h2{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg);}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h2{transform: skew(0);}
.test3:hover figcaption p{transform: skew(0);}

Copier après la connexion

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

Copier après la connexion

demo04 Remarque : Une fois la souris déplacée, le rectangle et le texte sont affichés ensemble. Effectuez un zoom arrière et l'image. va également rétrécir

Étapes :

1 Écrivez le code html et définissez le style initial du contenu et des images via CSS

. 2. Agrandissez le contenu de 1,2 fois. Cela permet de créer un effet de rétrécissement lorsque le facteur d'agrandissement devient 1 après le déplacement de la souris. La transparence du contenu est définie sur 0

3. Ensuite, définissez le style lorsque la souris est déplacée (:hover) Le grossissement du contenu devient 1, c'est-à-dire que la taille originale de l'image est réduite et la transparence devient 1 : Après le déplacement de la souris, le contenu est affiché et un tic ; -la grille tac-toe apparaît

/*缩放*/
.test4{background: #000;}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;}
.test4:hover figcaption p{transform: scale(1,1);opacity: 1;}
.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}
.test4:hover figcaption h2{opacity: 1;transform: scale(1);}
.test4:hover figcaption p{opacity: 1;transform: scale(1);}

Copier après la connexion

Étapes :

1 Écrivez le code html et définissez le contenu et les images initiales via le style CSS (tic-tac-. l'orteil est le chevauchement de deux rectangles)

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

Copier après la connexion

2. Réduisez les deux rectangles de 0,8 et définissez la transparence sur 0. Le contenu définit également la transparence sur 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;}

Copier après la connexion

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

Copier après la connexion

以上是几个简单的小例子，之所以用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%;}
}

Copier après la connexion

总结：

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

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