집 > 기사 > 웹 프론트엔드 > HTML 및 CSS의 전환 모듈

HTML 및 CSS의 전환 모듈

php中世界最好的语言원래의: 2018-03-13 11:29:381890검색

이번에는 HTML과 CSS의 전환 모듈을 소개하겠습니다. HTML과 CSS의 전환 모듈에 대한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

태그의 유사 클래스 선택자

태그

1. 관찰을 통해 태그에 특정 상태가 있음을 발견했습니다.

1.1 기본 상태, 방문한 적이 없음

1.2 방문한 상태

1.3 마우스 길게 누르기 상태

1.4 라벨 상태 위로 마우스를 가져가세요

2. 라벨의 의사 클래스 선택자는 무엇인가요?

라벨의 의사 클래스 선택자는 라벨의 다양한 상태 스타일을 수정하는 데 특별히 사용됩니다.

3. Format

:link 방문하지 않은 상태의 스타일 수정

:visited 방문한 상태의 스타일 수정

:hover a 태그 위에 마우스를 올려놓은 상태의 스타일 수정

:active 마우스를 길게 눌렀을 때 스타일

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

4. 4.1a 레이블의 의사 클래스 선택자는 단독으로 나타날 수도 있고 함께 나타날 수도 있습니다.

4.2a 레이블의 의사 클래스 선택자가 함께 나타나면 엄격한 순서가 있습니다. 요구 사항

작성 순서는 애증의 원칙을 준수해야 합니다

4.3 기본 상태의 스타일이 방문한 상태의 스타일과 동일하면 축약할 수 있습니다

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

a 의사 클래스 선택자 연습 Tags

1. 엔터프라이즈 개발에서는 태그 선택자 뒤에 태그의 의사 클래스 선택자를 작성하는 것이 가장 좋습니다.

2. 엔터프라이즈 개발에서는 태그 상자와 관련된 속성이 태그 선택자(표시 모드)에 작성됩니다. /width /height/padding/margin)

3. 엔터프라이즈 개발에서는 태그 텍스트/배경과 관련된 모든 것이 의사 클래스 선택기에 기록됩니다

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

태그에 대한 의사 클래스 선택기 실습

전환 모듈

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 연속 쓰기 처음 두 개의 매개변수만 작성하면 전환의 세 가지 요소가 충족되므로 마지막 두 개의 매개변수는 생략해도 됩니다.

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

2.3 다중 속성 이동의 속도/지연 시간/지속 시간이

transition:all 5s;

전환 루틴 작성>1.1 전환에 대해 걱정하지 말고 기본 인터페이스를 먼저 작성하세요. 1.2 수정해야 한다고 생각되는 속성 수정 1.3 그런 다음 이동 돌아가서 속성이 수정된 요소에 전환을 추가하세요. 그게 바로

탄성 효과

100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a791-过渡模块-弹性效果6e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 { 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; } 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee 45a2772a6b6107b401db3c9b82c049c2呼54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2伦54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2贝54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2尔54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2大54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2草54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2原54bdf357c58b8a65c66d7c19c8e4d114 45a2772a6b6107b401db3c9b82c049c2儿54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

아코디언 효과

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

이 글의 사례를 읽으신 후 방법을 익히셨을 거라 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!