이 글에서는 CSS를 사용하여 마우스를 안팎으로 움직이는 동적 효과를 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
지식 포인트: 변환-원산지
호환성 : IE10 이상
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p {
position: absolute;
width: 200px;
height: 60px;
text-align: center;
margin: 10px auto;
}
p::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 2px;
background: deeppink;
transition: transform .5s;
transform: scaleX(0);
transform-origin: 100% 0;//以（100%,0）坐标为基本点移动即缩小到0倍---->scaleX（0）
}
p:hover::before {
transform: scaleX(1);
transform-origin: 0 0;//以（0,0）坐标为基本点移动即放大到1倍---->scaleX（1）
}
</style>
</head>
<body>
<p>Hover Me</p>
</body>
</html>관련 추천:
마우스를 움직일 때 점진적인 하이라이트를 구현하는 순수 CSS
위 내용은 마우스 움직임의 동적 효과를 얻기 위한 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
