CSS3에서 회전 및 이동 애니메이션 효과를 구현하는 방법
- 藏色散人원래의
- 2018-10-19 15:59:038390검색
이 글에서는 주로 회전 효과를 얻기 위한 css3 애니메이션 방법을 소개합니다.
CSS는 프론트엔드를 배우는 친구들이라면 매우 익숙할 캐스케이딩 스타일 시트(Cascading Style Sheets)입니다. 글쎄요, 멋진 애니메이션 효과가 귀하의 웹사이트를 더욱 세련되게 보이게 하고 콘텐츠를 풍부하게 만들어 사용자의 관심을 끌 수 있다는 사실을 모두가 알아야 합니다.
이제 사진 회전 효과를 구현하는 간단하고 흥미로운 애니메이션 특수 효과를 소개하겠습니다.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3实现旋转移动动画特效</title>
<head>
<style>
.main{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
border-radius: 20px;
background: red;
position: relative;
top: 30px;
animation: asd 5s;
}
@keyframes asd {
0 %{transform: rotate(0deg);}
25%{transform: rotate(60deg);left: 0px;}
50%{left:500px;}
75%{transform: rotate(-520deg);}
100%{transform: rotate(0deg);left: 0px;}
}
</style>
</head>
<body>
<div class="main">
动画
</div>
</body>
</html>의 효과는 다음과 같습니다.
css3의 관련 중요 속성 소개:
transform:
변형 속성은 요소에 2D 또는 3D 변형을 적용하는 것을 의미합니다. 요소를 회전하고 크기를 조정하고 이동하거나 기울일 수 있습니다.
@keyframes:
@keyframes 규칙을 사용하면 애니메이션을 만들 수 있습니다. 즉, 여기서 @keyframes는 애니메이션을 정의하는 데만 사용되며 실제 의미는 없습니다.
CSS 애니메이션의 구현 원리는 하나의 CSS 스타일에서 다른 CSS 스타일로 점진적으로 변환하는 것입니다.
변경이 발생하는 시간은 백분율(또는 "from" 및 "to")로 지정됩니다. (0%는 애니메이션의 시작 시간, 100%는 애니메이션의 종료 시간입니다.)
CSS 애니메이션의 원리를 익히기만 하면 순수한 CSS를 통해 가장 멋진 효과를 얻는 것은 매우 쉽습니다.
이 글은 CSS3 애니메이션에서 회전 및 이동 효과를 구현하는 구체적인 방법을 간단하고 이해하기 쉽게 소개한 글입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.
더 멋진 CSS3, html5 및 javascript 특수 효과 코드는 다음에서 확인할 수 있습니다. javascript 특수 효과 컬렉션
프런트 엔드 관련 지식에 대해 더 알고 싶다면 PHP 중국어 웹사이트CSS3 비디오 튜토리얼을 따라가세요. , CSS 비디오 튜토리얼 , Bootstrap 튜토리얼 및 기타 관련 튜토리얼을 참조하고 배우는 것을 환영합니다!
위 내용은 CSS3에서 회전 및 이동 애니메이션 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!