마우스 움직임의 동적 효과를 얻기 위한 CSS
- 不言원래의
- 2018-05-03 14:38:178922검색
이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.