Übergangsmodule in HTML und CSS

Dieses Mal werde ich Ihnen das Übergangsmodul in HTML und CSS vorstellen. Was sind die Vorsichtsmaßnahmen für das Übergangsmodul in HTML und CSS? Hier ist ein praktischer Fall.

Pseudoklassenselektor eines Tags

ein Tag

1. Durch unsere Beobachtung haben wir festgestellt, dass ein Tag einen bestimmten Status hat

1.1 Standard Zustand, Nie besucht

1.2 Besucht-Status

1.3 Maus-Lange-Druck-Status

1.4 Maus bewegt sich über einen Tag-Status

2 .Was ist der Pseudo- Klassenselektor eines Tags?

Der Pseudoklassenselektor eines Tags wird speziell verwendet, um den Stil verschiedener Zustände eines Tags zu ändern

3 Format

:link Ändern Sie den Stil im nie besuchten Zustand

:visited Ändern Sie den Stil im besuchten Zustand

:hover Ändern Sie den Stil im Zustand, wenn die Maus über dem a-Tag

steht

:aktiv Ändert den Stil, wenn die Maus lange gedrückt wird

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

4. Hinweise

4.1 Die Pseudoklassenselektoren des Labels können einzeln oder zusammen angezeigt werden

4.2 Wenn die Pseudoklassenselektoren des a-Tags zusammen erscheinen, gibt es strenge Reihenfolgeanforderungen
Die Schreibreihenfolge muss dem Prinzip der Hassliebe entsprechen

4.3 Wenn der Standardzustand The Der Stil ist derselbe wie der Stil des besuchten Staates und kann daher abgekürzt werden

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

Pseudoklassenselektorübung eines Tags

1 Schreiben Sie den Pseudoklassenselektor von a Tag in der Unternehmensentwicklung Es ist am besten, den Selektor nach dem Etikettenselektor zu schreiben
2. In der Unternehmensentwicklung werden die Attribute, die sich auf ein Etikettenfeld beziehen, in den Etikettenselektor geschrieben (Anzeigemodus/Breite/Höhe/Abstand/Rand)
3. In der Unternehmensentwicklung wird alles, was mit dem Text/Hintergrund eines Tags zu tun hat, in das Pseudoklassenselektor

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;         }

Pseudoklassenselektorübung für ein Tag

Übergangsmodul geschrieben

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 Beim kontinuierlichen Schreiben können Sie die letzten beiden Parameter weglassen, denn solange die ersten beiden Parameter geschrieben werden, sind die drei Übergangselemente bereits erfüllt

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

2.3 Wenn mehrere Attribute vorhanden sind: Bewegungsgeschwindigkeit/Verzögerungszeit/Dauer sind gleich, daher kann es wie folgt abgekürzt werden:

Übergang:alle 5 Sekunden;

Übergang schreiben Routine>1.1 Machen Sie sich keine Sorgen um den Übergang, schreiben Sie ihn zuerst. Grundlegende Schnittstelle 1.2 Ändern Sie die Attribute, von denen wir glauben, dass sie geändert werden müssen. 1.3 Gehen Sie dann zurück und fügen Sie dem Element einen Übergang mit dem geänderten Attribut

hinzu

<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>

Akkordeoneffekt

<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Webseiten-Layout-Methode – klares Floating

Box-Modell von HTML und CSS

Das obige ist der detaillierte Inhalt vonÜbergangsmodule in HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!