마우스를 움직일 때 밑줄이 양쪽으로 확장되도록 하는 CSS3 및 의사 요소에 대한 자세한 설명
- 小云云원래의
- 2017-12-19 11:36:261733검색
이 글에서는 CSS3+ 의사 요소를 사용하여 마우스를 안으로 움직일 때 밑줄이 양쪽으로 확장되는 효과를 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 먼저 모든 사람의 이해를 돕기 위해 자세히 소개한 후 완전한 예제 코드를 제공합니다. 모두가 참고하여 필요한 것을 배울 수 있도록 친구 여러분, 와서 함께 공부하십시오. 도움이 되길 바랍니다.
먼저 렌더링을 살펴보겠습니다.
구현 아이디어:
의사 요소 :before 및 :after를 요소 하단 중앙에 배치하고 너비를 0에서 100으로 설정합니다. % 목표 달성.
구현 방법:
1. 먼저 블록 요소(인라인 요소에는 너비와 높이가 없음)를 정의하고 스타일을 밝은 회색 배경색의 직사각형으로 수정한 후 상대 위치를 설정합니다.
html code
<p id="underline"></p>
css style
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
2. 두 개의 의사 요소(before 및 :after)를 설정하고 배경색을 파란색(즉, 밑줄의 색상)으로 설정하고 절대 위치 지정을 사용하여 두 요소를 수정합니다. #밑줄 중앙 하단까지.
css style
#underline:before,
#underline:after{
content: "";/*单引号双引号都可以，但必须是英文*/
width: 0;
height: 3px; /*下划线高度*/
background: blue; /*下划线颜色*/
position: absolute;
top: 100%;
left: 50%;
transition: all .8s ; /*css动画效果，0.8秒完成*/
}
3. 마우스 이동 효과를 설정합니다.
css style
#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/
left:0%;
width:50%;
}
#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/
left: 50%; /*这句多余，主要是为了对照*/
width: 50%;
}
Optimization
1. 목적은 달성되었지만 두 개의 의사 요소가 사용됩니다. 하나는 왼쪽으로 50% 확장되고 다른 하나는 오른쪽으로 50% 확장됩니다. 모직물 100%로 늘어나나요?
css code
#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%;
}
2. :after 의사 요소만 정의하고 너비가 0인 왼쪽에서 50%에서 너비가 100%인 왼쪽에서 0%로 변경하여 목적을 달성합니다. 코드를 간소화하고 다른 작업을 용이하게 하기 위해 추가 :before가 있습니다.
전체 코드
鼠标移入下划线展开 <p id="underline"></p>
관련 권장 사항:
JavaScript는 Lagou.com과 유사한 마우스 이동 및 이동 효과를 구현합니다.
인터레이스 색상 변경, 마우스 이동 강조 표시를 달성하기 위한 순수 JS 코드
javascript 테이블 인터레이스 색상 변경 + 마우스 이동 및 이동 및 클릭 효과 방법_javascript 기술
위 내용은 마우스를 움직일 때 밑줄이 양쪽으로 확장되도록 하는 CSS3 및 의사 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!