CSS3 마우스 인 특수 효과: div 색상 그라데이션 및 확대 효과를 얻는 방법
- 坏嘻嘻원래의
- 2018-09-21 11:09:0010981검색
이 문서의 내용은 CSS3에서 전환을 사용하여 마우스를 가리키면 div의 색상, 높이 및 너비가 변경되는 효과를 얻는 방법에 대한 것입니다. 필요한 참조 값이 있습니다. 그것이 당신에게 도움이 되기를 바랍니다.
웹 페이지를 검색할 때 일반적으로 다음과 같은 상황을 볼 수 있습니다. 특정 영역 위에 마우스를 올리면 크기가 변경되는 동안에도 해당 영역의 모양이 지정된 시간 내에 확대되거나 축소됩니다. . 이 특수 효과는 어떻게 달성됩니까? 이제 CSS3에서 div 색상 그라데이션 효과를 얻고 확대 및 축소하기 위해 전환 속성과 호버 속성을 사용하는 방법을 소개하겠습니다.
css3의 전환 속성
전환 속성은 전환 속성, 전환 기간, 전환 타이밍 기능 및 전환 지연이라는 네 가지 전환 속성에 대한 축약된 속성입니다.
transition-property: 이동할 스타일(기본값은 all이며 세 가지 정의가 있을 수 있습니다: all, attr 및 none)
transition-duration: 이동 시간(만 이동 시간은 필수 값이며 0이 될 수 없습니다. 그렇지 않으면 전환이 아무런 효과가 없습니다.)
-
transition-timing-function: 모션 형식(사용에는 다음 6개가 포함됩니다)
용이성: (점진적으로 느려짐)
선형: (균일 속도)
easy-in: (가속)
easy-out: (감속)
easy-in-out: (먼저 가속한 다음 감속)
3차 베지어 베지어 곡선: (x1, y1, x2 , y2)참고: 정의되지 않은 경우 전환 타이밍 기능의 기본값은 easy입니다.
transition-delay: 지연 시간(기본값은 0)
전환 속성 및 브라우저 호환성(W3C 표준에 따름)
Internet Explorer 10, Firefox, Opera 및 Chrome과 같은 상위 버전 브라우저는 전환 속성의 표준 쓰기 방법을 지원합니다. Safari는 대체 -webkit-transition 속성을 지원합니다. 그러나 Internet Explorer 9 및 이전 브라우저는 전환 속성을 지원하지 않습니다.
css3 마우스인 특수효과 구현 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.box{
width：100px；
height：100px；
background-color：blue；
transition-duration：2s；
transition-timing-function：ease；
transition-delay：0s；
transition-property：all；
}
.box:hover{
width：200px；
height：200px；
background-color：red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> CSS3 마우스인 특수효과 구현 효과는 사진과 같습니다
더 멋진 CSS3, html5, javascript 특수 효과 코드, 모두 ：Javascript 특수 효과 컬렉션
에 있습니다.위 내용은 CSS3 마우스 인 특수 효과: div 색상 그라데이션 및 확대 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!