CSS를 사용하여 원형 모션 볼을 구현하는 방법의 예-CSS 튜토리얼-php.cn

CSS를 사용하여 원형 모션 볼을 구현하는 방법의 예

黄舟

풀어 주다： 2017-10-27 10:08:36

원래의

4181명이 탐색했습니다.

페이지에서 애니메이션 효과를 자주 볼 수 있습니다. 이러한 애니메이션 효과 중 상당수는 CSS를 통해서만 얻을 수 있습니다.

여기서는 CSS3 animationproperty를 사용합니다.

animation 속성은 6개의 애니메이션 속성을 설정하기 위한 단축 속성입니다.
animation-name은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다.
animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.
animation-timing-function은 애니메이션의 속도 곡선을 지정합니다.
animation-delay는 애니메이션이 시작되기 전의 지연을 지정합니다.
animation-iteration-count는 애니메이션을 재생해야 하는 횟수를 지정합니다.
animation-direction 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.
참고: 항상 animation-duration 속성을 지정하세요. 그렇지 않으면 지속 시간이 0이 되고 애니메이션이 재생되지 않습니다.

animation: name duration timing-function delay iteration-count direction;

로그인 후 복사

예: 원을 그리며 움직이는 작은 공. 아래는 관련 코드입니다. 이를 기반으로 해당 코드를 수정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS实现圆周运动小球</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type=&#39;text/css&#39;>
body{background:black;}
.class_ball
{
    width:8px;
    height:8px;
    background:#FFFFFF;
    border-radius:4px;
    box-shadow:0 0 7px #FFFFFF;
    left:200px;
    top:200px;
    position:absolute;
    -webkit-animation:action 2s linear infinite;
}
@-webkit-keyframes action
{
from{transform: rotate(0deg)  translate(58px) rotate(0deg);}
to{transform: rotate(360deg) translate(58px) rotate(-360deg);}
}
</style>
</head>
<body>
   <p class="class_ball"></p>
</body>
</html>

로그인 후 복사

위 내용은 CSS를 사용하여 원형 모션 볼을 구현하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!