【CSS 애니메이션】HTML과 CSS만으로 만들어 보았던 「선풍기」

17196 단어 애니메이션HTMLCSS초보자CSS3

소개



안녕하세요.
최근에는 CSS 애니메이션이 즐겁고 빠져 있습니다.
이번에도 콜라에 이어 선풍기를 만들어 보았습니다!

「선풍기」



See the Pen 선풍기 by 미치 ( 🍑파고 )
on CodePen .


여기가 선풍기와 프로그램입니다.

코드를 복사하면 똑같이 표시할 수 있다고 생각합니다!

선풍기의 팬 부분에 마우스를 켜면(hover), 목을 흔들기도 합니다.



여기에도 코드를 기재해 둡니다.




index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>扇風機</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="fan fan-1">
        <div class="core_part">
            <div class="wing wing-1"></div>
            <div class="wing wing-2"></div>
            <div class="wing wing-3"></div>
            <div class="wing wing-4"></div>
            <div class="wing wing-5"></div>
            <div class="wing wing-6"></div>
        </div>
    </div>
    <div class="fan fan-2"></div>
    <div class="fan fan-3">
        <div class="buttons">
            <div class="button"></div>
            <div class="button"></div>
            <div class="button"></div>
            <div class="button"></div>
        </div>
    </div>

</body>
</html>




styles.css

body{
    margin:50px 0 0;
    background-color:antiquewhite;
}

.fan{
    margin:0 auto;
    background-color:black;
}

.fan-1{
    z-index:2;
    width:275px;
    height:275px;
    border:10px solid blue;
    border-radius:50%;
}

.fan-1:hover{
    animation-name:swing;
    animation-duration:5s;
    animation-timing-function:liner;
    animation-iteration-count:infinite;
}

@keyframes swing{
    0%{transform:none;}
    25%{
        transform:rotate(90deg);
        transform:translateX(25px);
    }
    50%{transform:none;}
    75%{
        transform:rotate(-90deg);
        transform:translateX(-25px);
    }
    100%{transform:none;}
}

.core_part{
    margin:0 auto;
    background-color:gainsboro;
    width:50px;
    height:50px;
    border-radius:50%;
    position:relative;
    top:112px;
    opacity:1.0;
    animation-name:rotation;
    animation-duration:0.01s;
    animation-timing-function:liner;
    animation-iteration-count:infinite;
}

.wing{
    margin:0 auto;
    background-color:lightsteelblue;
    width:30px;
    height:100px;
    border-radius:5px;
    position:relative;
}

.wing-1{
    top:50px;
    transform:rotate(0deg);
}

.wing-2{
    right:65px;
    bottom:88px;
    transform:rotate(60deg);
}

.wing-3{
    right:64px;
    bottom:264px;
    transform:rotate(120deg);
}

.wing-4{
    bottom:400px;
    transform:rotate(180deg);
}

.wing-5{
    left:65px;
    bottom:462px;
    transform:rotate(240deg);
}

.wing-6{
    left:65px;
    bottom:488px;
    transform:rotate(300deg);
}

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

.fan-2{
    z-index:1;
    width:50px;
    height:140px;
    border-radius:5px;
    border-top:10px solid blue;
    border-bottom:3px solid dimgray;
    position:relative;
    bottom:10px;
}

.fan-3{
    width:250px;
    height:140px;
    border:5px solid blue;
    border-radius:30px;
    position:relative;
    bottom:35px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.buttons{
    width:100px;
    display:flex;
    justify-content:center;
    justify-content:space-between;
    align-items:center;
}

.button{
    width:15px;
    height:15px;
    background-color:gray;
    border-radius:50%;
}



이상입니다!

여기까지 읽어 주셔서 감사합니다!


【CSS애니메이션】HTML과 CSS만으로 콜라(탄산쥬와쥬와~)를 만들어 보았다
CollectionView로 정렬된 애니메이션 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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