CSS로 원을 회전

6077 단어 codenewbiecssbeginnershtml
사람들이 어떻게 이미지에 애니메이션을 적용하는지 궁금한 적이 있습니까? 아래 이미지처럼?? 오늘은 당신의 행운의 날입니다. 만드는 방법은 간단합니다.


면책 조항: 기본 CSS 애니메이션 지식이 있으면 정말 도움이 됩니다.

기본 HTML 템플릿으로 시작합니다. 당신은 어떤 이미지를 사용할 수 있습니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Rotating Circle</title>
    <link rel="stylesheet" type="text/css" href="circle.css">
</head>
<body>
    <h1>CSS Rotating Circle</h1>

    <main>
        <div>
            <img src="iconmonstr-circle-5.svg" alt="circle">
        </div>
    </main>
</body>
</html>


이 지루한 이미지는 브라우저에 표시되어야 합니다.


살짝 양념해볼까요?

/* circle.css */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 20px 0px;
    font-family: Arial;
}
main{
    height: 500px;
    display: grid;
    align-items: center;
}


다른 트릭을 사용하여 콘텐츠를 중앙에 배치할 수 있습니다. 저는 그리드display: grid; 및 align-items: center;를 사용했습니다.

SVG 이미지를 사용하고 있으므로 아래 스타일로 이미지 크기를 약간 늘립니다.

main img{
    width: 200px;
    height: 200px;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
}

border-radius는 선택 사항일 수 있습니다. 이제 아래 이미지처럼 모든 것이 귀여워 보일 것입니다.


@keyframes를 지정하지 않으면 아무 것도 애니메이션할 수 없습니다.

@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}


그리고 짜잔, 끝났습니다. 또한 animation-name:와 @keyframes는 같은 이름의 회전을 공유합니다.


JavaScript를 사용하여 애니메이션을 시작하고 중지하는 것과 같이 이를 가지고 놀거나 더 많은 기능을 추가할 수도 있습니다.

읽어 주셔서 감사합니다.
Github 프로필에 배지 추가
TensorFlow lite를 이용한 실시간 수화 감지 안드로이드 애플리케이션

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage