CSS3에서 전환 기능을 사용하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

CSS3에서 전환 기능을 사용하는 방법은 무엇입니까?

零下一度

풀어 주다： 2017-06-28 09:40:53

원래의

2706명이 탐색했습니다.

1.transition function

전환 속성 사용 방법: 전환:속성 기간 타이밍 기능;

여기서 속성은 원활하게 전환되어야 하는 속성을 나타내고, 지속 시간은 속성 값의 원활한 전환을 완료하는 데 걸리는 시간을 나타냅니다. , timing-function은 속성 값의 원활한 전환을 완료하는 데 걸리는 시간을 나타냅니다.

여러 개의 부드러운 전환 예:

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5    
 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     
 <title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12     #test{13         
 width: 500px;14         height: 500px;15         background-color: yellow;16         /*css动画*/17         
 transform: rotate(0);18         -webkit-transition: transform 0.5s linear, width 0.5s linear;19         -moz-transition: transform 0.5s linear, width 0.5s linear;20         -ms-transition: transform 0.5s linear, width 0.5s linear;21         -o-transition: transform 0.5s linear, width 0.5s linear;22         transition: transform 0.5s linear, width 0.5s linear;23     }24     #test:hover{25         width: 200px;26         transform: rotate(180deg);27     }28 </style>29 </body>30 </html>

로그인 후 복사

2.animation 함수

사용 예:

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     
 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     
 <title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12 /*animation动画*/13     
 @-webkit-keyframes colorChange {14         0%{15             background-color: deepskyblue;16         }        
 50%{18             
 background-color: red;19         }20         
 100%{21             background-color: deepskyblue;22         }23     }24     
 #test{25         width:500px;26         height: 500px;27         
 background-color: deepskyblue;28     }29     #test:hover{30         animation-name: colorChange;         
 animation-duration: 1s;32         animation-timing-function: linear;33     }34 </style>35 </body>36 
 </html>

로그인 후 복사

애니메이션 구현 방법:

method	속성값의 변화 속도
linear	애니메이션의 시작과 끝에서 같은 속도로 변경됩니다
ease-in	애니메이션이 매우 느리게 시작한 다음 곡선 값을 따라 속도가 빨라집니다
ease- out	애니메이션이 매우 빠르게 시작되었다가 곡선 값을 따라 느려집니다
ease	애니메이션이 매우 느리게 시작되었다가 곡선 값을 따라 속도가 빨라진 다음 곡선 값을 따라 느려집니다
ease -in-out	애니메이션이 매우 느리게 시작된 다음 곡선 값을 따라 속도가 빨라지고 다시 곡선 값을 따라 느려집니다

위 내용은 CSS3에서 전환 기능을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!