Modules de transition en HTML et CSS

Cette fois je vais vous présenter le module de transition en HTML et CSS Quelles sont les précautions pour le module de transition en HTML et CSS Voici un cas pratique, jetons un oeil.

Sélecteur de pseudo-classe d'une balise

une balise

1 Grâce à notre observation, nous avons constaté qu'une balise a un certain état

1.1 Par défaut. état, Jamais visité

1.2 Statut visité

1.3 Statut d'appui long de la souris

1.4 Survol de la souris sur un statut de tag

2 .Quel est le pseudo- sélecteur de classe d'une balise ?

Le sélecteur de pseudo-classe d'une balise est spécialement utilisé pour modifier le style des différents états d'une balise

Format

:link Modifier le style à l'état jamais visité

:visited Modifier le style à l'état visité

:hover Modifier le style à l'état lorsque la souris survole la balise a

:active Modifie le style lors d'un appui long de la souris

   a:link{             color: tomato;         }         
   a:visited{             color: green;         }         
   a:hover{             color: orange;         }         
   a:active{             color: pink;         }

4 Notes

4.1 Les sélecteurs de pseudo-classe de l'étiquette a peuvent apparaître seuls ou ensemble. >

4.2 Si les sélecteurs de pseudo-classe de la balise a apparaissent ensemble, il existe des exigences d'ordre strictes

L'ordre d'écriture doit être conforme au principe de l'amour haine

4.3 Si l'état par défaut Le le style est le même que le style de l'état visité, alors il peut être abrégé

  a{             
  // 简写格式             
  color: green;         }         
  a:hover{             color: orange;         }         
  a:active{             color: pink;         }

Exercice de sélection de pseudo-classe d'une balise

1 Écrire le sélecteur de pseudo-classe d'un. balise en développement d'entreprise Il est préférable d'écrire le sélecteur après le sélecteur d'étiquette

2. En développement d'entreprise, les attributs liés à une boîte d'étiquette sont écrits dans le sélecteur d'étiquette (mode d'affichage/largeur/hauteur/padding/marge)
3. Dans le développement d'entreprise, tout ce qui concerne le texte/arrière-plan d'une balise est écrit dans le sélecteur de pseudo-classe

ul li a{             width: 120px;             height: 40px;             display: inline-block;         }         ul li a:link{             background-color: pink;             color: white;             text-decoration: none;         }         ul li a:hover{             color: red;             background-color: #ccc;         }         ul li a:active{             color: yellow;         }

Exercice de sélection de pseudo-classe pour une balise

Module de transition

p{         width: 100px;         height: 50px;         background-color: red;        
/*告诉系统哪个属性需要执行过渡效果*/ 
transition-property: width, background-color;         
/*告诉系统过渡效果持续的时长*/         
transition-duration: 5s, 5s;         
/*transition-property: background-color;*/
/*transition-duration: 5s;*/     }     
*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
p:hover{         width: 300px;         background-color: blue;     }
  ![过渡模块 ]
  (http://upload-images.jianshu.io/upload_images/1482909-de9fd4fa86de87cc.gif?imageMogr2/auto-orient/strip)  ######1,过渡三要素 1.1必须要有属性发生变化 1.2必须告诉系统哪个属性需要执行过渡效果 1.3必须告诉系统过渡效果持续时长 ######2.注意点 当多个属性需要同时执行过渡效果时用逗号隔开即可 transition-property: width, background-color; transition-duration: 5s, 5s; ###
    过渡模块-其它属性 >  transition-delay: 2s;   
    //告诉系统延迟多少秒之后才开始过渡动画 transition-timing-function: linear; 
    //告诉系统过渡动画的运动的速度 ###### transition-timing-function:  有五个取值 linear, ease , ease-in , ease-out , ease-in-out ![transition-timing-function](http://upload-images.jianshu.io/upload_images/1482909-22e31879960d948d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ###
    过渡连写格式 >######1.过渡连写格式 transition: 过渡属性 过渡时长 运动速度 延迟时间;  
transition: background-color 5s linear 0s;>######2.过渡连写注意点 2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可  
transition: width 5s linear 0s,background-color 5s linear 0s;

2.2 Vous pouvez omettre les deux derniers paramètres lors d'une écriture continue, car tant que les deux premiers paramètres sont écrits, les trois éléments de transition sont déjà satisfaits

transition: width 5s,background-color 5s,height 5s;

2.3 S'il y a plusieurs attributs La vitesse de mouvement/le temps de retard/la durée sont les mêmes, ils peuvent donc être abrégés en :

transition : toutes les 5 s ;

Écrire la transition routine>1.1 Ne vous inquiétez pas de la transition, écrivez-la d'abord Interface de base 1.2 Modifier les attributs qui, selon nous, doivent être modifiés 1.3 Revenez ensuite en arrière et ajoutez une transition à l'élément avec l'attribut modifié

.

<html> <head> <meta charset="UTF-8"> <title>91-过渡模块-弹性效果</title> <style> { margin: 0; padding: 0; } p{ height: 100px; background-color: red; margin-top: 100px; text-align: center; line-height: 100px; } p span{ font-size: 80px; /transition-property: margin;/ /transition-duration: 3s;*/ transition: margin 3s; } p:hover span{ margin: 0 20px; } </style> </head> <body>
<p> <span>呼</span> <span>伦</span> <span>贝</span> <span>尔</span> <span>大</span> <span>草</span> <span>原</span> <span>儿</span> </p> </body> </html>

Effet accordéon

<html> <head> <meta charset="UTF-8"> <title>92-过渡模块-手风琴效果</title> <style> { margin: 0; padding: 0; } ul{ width: 960px; height: 300px; margin: 100px auto; border: 1px solid #000; overflow: hidden; } ul li{ list-style: none; width: 160px; height: 300px; background-color: red; float: left; /border: 1px solid #000;/ /box-sizing: border-box;/ /transition-property: width;/ /transition-duration: 0.5s;*/ transition: width 0.5s; } ul:hover li{ width: 100px;  //ul 被hover 所得li宽度都变成100px } ul li:hover{ width: 460px;  //更具体，优先级更高 只有被hover 的li 才会变宽 } </style> </head> <body> <ul> <li>
</li> <li>  </li> <li>  </li> <li>  </li> <li>  </li> <li>  </li> </ul> </body> </html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site php chinois !

Lecture recommandée :

Méthode de mise en page des pages Web - flottant clair

Modèle de boîte de HTML et CSS

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!