CSS3에서 회전 및 이동 애니메이션 효과를 구현하는 방법-CSS 지식-php.cn

CSS3에서 회전 및 이동 애니메이션 효과를 구현하는 방법

藏色散人

풀어 주다： 2019-11-30 16:38:37

원래의

8448명이 탐색했습니다.

이 글에서는 주로 회전 효과를 얻기 위한 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에서 회전 및 이동 애니메이션 효과를 구현하는 방법