CSS를 사용하여 원형 모션 볼을 구현하는 방법의 예
- 黄舟원래의
- 2017-10-27 10:08:364136검색
페이지에서 애니메이션 효과를 자주 볼 수 있습니다. 이러한 애니메이션 효과 중 상당수는 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='text/css'>
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS의 선택기 사용 요약다음 기사：CSS의 선택기 사용 요약