이 글에서는 CSS3+ 의사 요소를 사용하여 마우스를 안으로 움직일 때 밑줄이 양쪽으로 확장되는 효과를 얻는 방법에 대한 관련 정보를 주로 소개합니다. 글에서는 먼저 모든 사람의 이해를 돕기 위해 자세히 소개한 후 완전한 설명을 제공합니다. 모두가 참고할 수 있는 예제 코드입니다. 공부하고, 필요하면 같이 공부하세요.
먼저 렌더링을 살펴보겠습니다.
구현 아이디어:
의사 요소 :before 및 :after를 요소 하단 중앙에 배치하고 너비를 0에서 100%로 설정하여 다음을 달성합니다. 목표.
구현 방법:
1. 먼저 블록 요소(인라인 요소에는 너비와 높이가 없음)를 정의하고 스타일을 배경으로 수정합니다. 밝은 회색 직사각형의 색상, 상대 위치를 설정합니다.
html 코드
<p id="underline"></p>
css 스타일
#underline{ width: 200px; height: 50px; background: #ddd; margin: 20px; position: relative; }
2. 두 개의 의사 요소(before 및 :after)를 설정하고 배경색을 파란색으로 설정합니다(즉, 밑줄 색상), 절대 위치 지정을 사용하여 두 요소를 #밑줄의 아래쪽 중간 위치에 고정합니다.
css 스타일
rree3. 마우스 이동 효과를 설정합니다.
css 스타일
#underline:before, #underline:after{ content: "";/*单引号双引号都可以,但必须是英文*/ width: 0; height: 3px; /*下划线高度*/ background: blue; /*下划线颜色*/ position: absolute; top: 100%; left: 50%; transition: all .8s ; /*css动画效果,0.8秒完成*/ }
최적화
1. 목적은 달성했지만 2개의 pseudo 요소를 사용했습니다. 하나는 왼쪽으로 50% 확장하고, 하나는 오른쪽으로 확장하고, 하나는 100% 목표를 달성합니까?
css code
#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/ left:0%; width:50%; } #underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/ left: 50%; /*这句多余,主要是为了对照*/ width: 50%; }
2. :after 의사 요소만 정의하고 왼쪽에서 50%, 왼쪽에서 0~0% 너비로 변경합니다. 너비를 100%로 구현하여 코드를 간소화하고 다른 작업을 용이하게 하기 위해 :before를 추가하는 목적을 달성할 수 있습니다.
전체 코드
#underline:after{ content: ""; width: 0; height: 5px; background: blue; position: absolute; top: 100%; left: 50%; transition: all .8s; } #underline:hover:after{/*原理是left:50%变成0%的同时,宽度从0%变成100%*/ left: 0%; width: 100%; }
위 내용은 CSS3 및 의사 요소를 사용하여 마우스를 움직일 때 밑줄을 양쪽으로 확장하는 특수 효과 코드를 도입합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!