순환 효과를 얻기 위해 CSS를 사용하는 방법은 무엇입니까? (코드 예)
- 云罗郡主앞으로
- 2018-10-23 15:13:402189검색
이 기사에서는 CSS를 사용하여 순환 효과를 얻는 방법에 대해 설명합니다. (코드 예)에는 특정 참고 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.
우리는 이전에 CSS3 애니메이션 효과가 변환, 전환 및 애니메이션의 세 가지 주요 부분으로 구성된다는 것을 알고 있었습니다. 처음 2장에서는 변형 효과와 전환 효과에 대해 자세히 설명했습니다. 이 장에서는 CSS3의 "실제" 애니메이션 효과를 설명합니다.
CSS3에서는 애니메이션 속성을 사용하여 애니메이션 효과를 구현합니다. 애니메이션 속성과 전환 속성은 모두 동일한 기능을 가지며, 둘 다 요소의 "속성 값"을 변경하여 애니메이션 효과를 얻습니다. 하지만 둘 사이에는 큰 차이점이 있습니다. 전환 속성은 속성의 시작 값과 끝 값을 지정한 다음 두 속성 값 사이를 원활하게 전환해야만 애니메이션 효과를 얻을 수 있으므로 간단한 애니메이션 효과만 얻을 수 있습니다. . 애니메이션 속성은 여러 개의 키프레임을 정의하고 각 키프레임에 있는 요소의 속성값을 정의하여 복잡한 애니메이션 효과를 구현합니다.
위 문단은 매우 가치가 있으며, 초보자에게 가장 혼란스러운 질문인 "애니메이션 속성과 전환 속성의 차이점은 무엇입니까?"에 대한 답변을 다루고 있습니다. 처음에는 이해하지 못할 수도 있지만, 이 장을 읽은 후에는 다시 돌아와서 주의 깊게 읽어야 합니다!
모든 사람이 CSS3 애니메이션 효과의 마법을 느낄 수 있도록 먼저 예를 들어 보겠습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3动画</title>
<style type="text/css">
div
{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
div:hover
{
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>브라우저에서의 미리보기 효과는 다음과 같습니다.
분석:
보시다시피 여기에 빨간색 배경색의 div 요소가 있습니다. 요소의 배경색은 빨간색에서 파란색으로, 파란색에서 노란색으로, 노란색에서 다시 빨간색으로 일련의 변경을 거칩니다.
CSS3 전환 속성을 사용하라는 요청을 받으면 이를 달성할 수 있다고 상상해 보세요. 물론 그렇지 않습니다. 전환 속성은 하나의 변경 효과만 얻을 수 있기 때문입니다. 전환 속성은 간단한 애니메이션(1개)만 구현할 수 있는 반면 애니메이션 속성은 복잡한 애니메이션(시리즈)을 구현할 수 있다는 것을 이해할 수 있습니다.
위는 CSS를 사용하여 순환 효과를 얻는 방법에 대한 것입니다. (코드 예) 전체 소개, CSS3 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 순환 효과를 얻기 위해 CSS를 사용하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!