이번에는 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  ###
过渡连写格式 >######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;
transition:all 5s;
전환 루틴 작성>1.1 전환에 대해 걱정하지 말고 기본 인터페이스를 먼저 작성하세요. 1.2 수정해야 한다고 생각되는 속성 수정 1.3 그런 다음 이동 돌아가서 속성이 수정된 요소에 전환을 추가하세요. 그게 바로
탄성 효과
<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><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>추천 도서:
웹 페이지 레이아웃 방법 - 투명 부동 HTML 및 CSS 상자 모델위 내용은 HTML 및 CSS의 전환 모듈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
