Transition modules in HTML and CSS

This time I will bring you the transition module in HTML and CSS. What are the precautions for the transition module in HTML and CSS? The following is a practical case, let’s take a look.

Pseudo-class selector of a tag

a tag

1. Through our observation, we found that a tag has a certain state

1.1Default state, Never visited

1.2 Visited status

1.3 Mouse long press status

1.4 Mouse hovering over a label status

2 .What is the pseudo-class selector of a tag?

The pseudo-class selector of a tag is specially used to modify the style of different states of a tag

3.Format

:link Modify the style in the state that has never been visited

:visited Modify the style in the visited state

:hover Modify the style in the state when the mouse is hovering over the a tag

:active Modify the style when the mouse is long-pressed

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

4. Note that

4.1a The pseudo-class selector of the label can appear alone or together

4.2 If the pseudo-class selectors of the a tag appear together, there are strict order requirements
The order of writing must comply with the principle of love hate

4.3 If the default state style The style of the visited state is the same, then you can abbreviate

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

Pseudo-class selector for a tag Exercise

1. It is best to write a pseudo-class selector for a tag in enterprise development Behind the label selector
2. In enterprise development, the attributes related to a label box are written in the label selector (display mode/width/height/padding/margin)
3. In enterprise development Everything related to the a tag text/background is written in the pseudo-class selector

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

a tag pseudo-class selector practice

Transition module

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 When writing continuously The last two parameters can be omitted, because as long as the first two parameters are written, the three elements of transition have been satisfied

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

2.3 If there are multiple attributes of movement speed/delay time/duration are the same, then it can be abbreviated as:

transition:all 5s;

Writing transition routines>1.1 Don’t worry about the transition, write the basic interface first 1.2 Modify the attributes we think need to be modified 1.3 Go back and add a transition to the element whose attributes have been modified

. Elastic effect

  <meta> <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>  
<p> <span>呼</span> <span>伦</span> <span>贝</span> <span>尔</span> <span>大</span> <span>草</span> <span>原</span> <span>儿</span> </p>  

Accordion effect

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

I believe you have seen it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The layout method of web pages: clearing floats

The box model of HTML and CSS

The above is the detailed content of Transition modules in HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!