Maison >interface Web >tutoriel CSS >Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image
Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image
- php中世界最好的语言original
- 2018-03-21 09:54:343094parcourir
Cette fois, je vais vous présenter l'effet d'invite dynamique CSS3 lorsque la souris est déplacée dans l'image. Quelles sont les précautions pour implémenter l'effet d'invite dynamique CSS3 lorsque la souris est déplacée dans l'image. Voici un cas pratique, jetons un oeil.
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
1.
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)}
transform:rotate()
Signification : rotation ; "deg" est le degré de rotation. Par exemple, "180deg" signifie une rotation de "180 degrés". comme suit
.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
transform: skew()
Signification : skew Les exemples sont les suivants
.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()
Signification : Le rapport 1,8 signifie agrandir à un rapport de 1,8. S'il s'agit d'un multiple entier, par exemple, le grossissement 3 fois doit être écrit comme 3,0. Les exemples sont les suivants
.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}
Exemple de. transform
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. vers la gauche jusqu'à ce qu'il ne soit plus visible (transform:translate(-600px,0););
3. Définissez ensuite le style lorsque la souris se déplace (:hover) La transformation est également utilisée pour déplacer le contenu vers la gauche d'une distance 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);}
<!--移动--> <figure class="test1"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>这里是图片的相关描述内容</p> <p>这里是图片的相关描述内容</p> <p>这里是图片的相关描述内容</p> </figcaption> </figure>
demo02 Description : Une fois la souris déplacée, l'image devient floue et le rectangle pivote de l'extérieur de l'image vers la position spécifiée dans l'image. Le texte survole depuis la droite et. affiche progressivement
Étapes :
1 Écrivez le code html et définissez le style initial du contenu et de l'image via CSS (le texte rectangulaire est sur le image);
2. Passez le rectangle L'attribut transform est déplacé jusqu'à ce qu'il soit invisible dessus et que l'angle de rotation soit défini sur 0 transform: translation(0,-400px) rotate(0deg);
3. Définissez ensuite le style lorsque la souris se déplace (:hover) Définissez le déplacement sur 0 et faites pivoter la transformation à 360 degrés : translation(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;}
<!--旋转--> <figure class="test2"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>飞来飞去</p> <p></p> </figcaption> </figure>demo03 Remarque : Les mots déformés s'affichent normalement après le déplacement de la souris (car ils sont déformés dans l'exemple à 90 degrés donc aucun texte ne peut être vu visuellement)
/*扭曲*/
.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);}
<!--扭曲--> <figure class="test3"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>这里是图片的相关描述内容</p> </figcaption> </figure>demo04. Description : Une fois la souris déplacée, le rectangle et le texte sont affichés et réduits, et l'image est également réduite
3.接下来设置鼠标移入时(:hover)的样式 内容放大倍数变成1也就是原始大小 图片缩小 透明度都变成1;
/*缩放*/
.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);}
<!--缩放--> <figure class="test4"> <img src="img/altimg05.jpg"> <figcaption> <h2>图片标题</h2> <p>这里是图片的相关描述内容</p> <p></p> </figcaption> </figure>
demo05 说明：鼠标移入后 内容显示 并出现井字格
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式（井字就是两个矩形的重叠）
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中文网其它相关文章！
推荐阅读：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!