구현 방법: 1. "@keyframes 애니메이션 이름 {50% {transform: 회전(회전 각도);}" 문을 사용하여 회전 애니메이션을 생성합니다. 2. "요소 {애니메이션: 애니메이션 이름 시간 무한;}을 사용합니다. " 문을 회전합니다. 지정된 요소에 애니메이션이 적용됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3은 회전 애니메이션을 구현합니다
1. CSS3를 사용하여 애니메이션을 구현하려면 animation 속성과 "@keyframes" 규칙을 사용해야 합니다.
@keyframes는 CSS 애니메이션 주기의 동작을 정의하고 간단한 애니메이션을 만드는 데 사용할 수 있는 CSS3의 규칙입니다.
애니메이션은 시간이 지남에 따라 CSS 속성이 변경되는 것을 표현한다는 점에서 전환과 유사합니다. 주요 차이점은 속성 값이 변경될 때(예: 마우스 오버 시 속성 값이 변경될 때) 전환이 암시적으로 트리거되지만 애니메이션 속성이 적용될 때 애니메이션이 명시적으로 수행된다는 것입니다. 따라서 애니메이션은 애니메이션 속성에 대한 명시적인 값을 표시해야 합니다. 이 값은 @keyframes 규칙에 지정된 애니메이션 키프레임에 의해 정의됩니다. 따라서 @keyframes 규칙은 시간에 따라 속성 값이 어떻게 변하는지 설명하는 캡슐화된 CSS 스타일 규칙 세트로 구성됩니다.
그런 다음 다양한 CSS 애니메이션 속성을 사용하여 애니메이션 반복 횟수, 시작 값과 끝 값을 번갈아 표시하는지 여부, 애니메이션을 실행할지 일시 중지할지 등 애니메이션의 다양한 측면을 제어할 수 있습니다. 애니메이션의 시작 시간이 지연될 수도 있습니다.
구문:
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}2. 회전 동작을 제어하려면 "@keyframes" 규칙에 transform: rotate(旋转角度)를 사용하세요.
구현 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: pink;
margin: 100px;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove {
50% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
50% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3에서 회전 애니메이션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
앵커 포지셔닝 그냥 소스 순서를 관리하지 마십시오Apr 29, 2025 am 09:37 AM앵커 포지셔닝이 HTML 소스 순서를 철회한다는 사실은 컨텐츠와 프리젠 테이션 사이의 또 다른 문제가있는 또 다른 분리 때문에 CSS-Y이기 때문입니다.
마진은 무엇입니까? 40px 100px 120px 80px를 의미합니까?Apr 28, 2025 pm 05:31 PM기사는 CSS 마진 속성, 특히 "마진 : 40px 100px 120px 80px", 응용 프로그램 및 웹 페이지 레이아웃에 미치는 영향에 대해 설명합니다.
다른 CSS 테두리 속성은 무엇입니까?Apr 28, 2025 pm 05:30 PM이 기사에서는 CSS 국경 속성에 대해 설명하고 사용자 정의, 모범 사례 및 응답성에 중점을 둡니다. 주요 인수 : Border-Radius는 반응 형 디자인에 가장 효과적입니다.
CSS 배경은 무엇이며 속성을 나열합니까?Apr 28, 2025 pm 05:29 PM이 기사에서는 CSS 배경 속성, 웹 사이트 디자인 향상에 대한 사용 및 피하는 일반적인 실수에 대해 설명합니다. 주요 초점은 배경 크기를 사용한 반응 형 디자인에 중점을 둡니다.
CSS HSL 색상은 무엇입니까?Apr 28, 2025 pm 05:28 PM기사는 CSS HSL 색상, 웹 디자인에서의 사용 및 RGB의 장점에 대해 설명합니다. 주요 초점은 직관적 인 색상 조작을 통해 설계 및 접근성을 향상시키는 데 있습니다.
CSS에 댓글을 추가 할 수있는 방법은 무엇입니까?Apr 28, 2025 pm 05:27 PM이 기사는 CSS의 주석 사용에 대해 논의하고 단일 라인 및 멀티 라인 주석 구문을 자세히 설명합니다. 의견은 코드 가독성, 유지 관리 및 협업을 향상 시키지만 제대로 관리하지 않으면 웹 사이트 성능에 영향을 줄 수 있다고 주장합니다.
CSS 선택기는 무엇입니까?Apr 28, 2025 pm 05:26 PM이 기사는 CSS 선택기, 유형 및 HTML 요소 스타일링을위한 사용법에 대해 설명합니다. ID와 클래스 선택기를 비교하고 복잡한 선택기의 성능 문제를 해결합니다.
어떤 유형의 CSS가 우선 순위가 가장 높습니까?Apr 28, 2025 pm 05:25 PM이 기사는 CSS 우선 순위에 대해 논의하며, 가장 높은 특이성을 가진 인라인 스타일에 중점을 둡니다. CSS 충돌 관리를위한 특이성 수준, 재정의 방법 및 디버깅 도구를 설명합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
