CSS animation에서 놀아 넘어뜨리다 - wave -

15028 단어 CSSanimation
CSS animation day2입니다.
오늘은 파도를 표현하고 싶습니다.　

1. 완성판





2. 왜 웨이브?



2019년 디자인은 유체 디자인이 올 것이라고 생각합니다.
여기 문서를 참조하십시오.

이 디자인, 얼마나 마음이 진정하는 것입니까 ....　

의료 현장에서는 스트레스 풀한 상황이므로, 자연을 조금이라도 느끼고 치유할 수 있도록, 부드러운 표현을 해 보고 싶었습니다. 애니메이션을 도입하는 것으로, 유동적이 되어, 정말 말할 수 없는 치유가 있습니다.

3. 참고문헌



youtube; 6분 만에 파도가 생길 수 있습니다! 이해하기 쉬운 동영상
여기 알기 쉽습니다.

4. 분해해 본다



먼저 box를 만듭니다.



index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <style>
    </style>
</head>
<body>
    <div class="box">
        <div class="wave"></div>
    </div>
</body>
</html>

styles.css
.box{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #4973ff;
}

다음으로 사각형 안의 웨이브를 만들어 갑니다.



styles.css

.box{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #4973ff;

}

.wave{
    position: relative;
    width: 100%;
    height: 100%;
    background: #4973ff;
    box-shadow: inset 0 0 50px rgba(0,0,0,.5)
}

여기에서 포인트입니다! !　

파를 어떻게 표현하는지입니다만, 이 사각형의 상반부에 겹치도록(듯이), 다른 사각형을 겹칩니다.



styles.css
.wave:before,
.wave:after{
    content: '';
    position: absolute;
    width: 200%;
    height: 150%;
    top:0;
    left: 50%;
    transform: translate(-50%, -75%);
    background: #000;
}

이 검은 색 사각형을 색을 하얗게하고 회전시킵니다.



styles.css
.wave:before,
.wave:after{
    content: '';
    position: absolute;
    width: 200%;
    height: 150%;
    top:0;
    left: 50%;
    transform: translate(-50%, -75%);
    background: #fff;
}


.wave:before{
    background: #fff;
    animation: rotation 5s linear infinite;
}

@keyframes rotation{
    0%{
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -75%) rotate(180deg);
    }
}

사각형을 border-radius로 둥글게합니다.
그리고 2개 겹칩니다.



styles.css
.wave:before{
    background: #fff;
    animation: rotation 5s linear infinite;
    border-radius: 40%;
}

.wave:after{
    background: #fff;
    opacity: 0.5;
    animation: rotation 5s linear infinite;
    border-radius: 45%;
}


@keyframes rotation{
    0%{
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -75%) rotate(180deg);
    }
}

프레임도 함께 움직이기 때문에 box overflow를 hidden으로 만듭니다.

styles.css
.box{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #4973ff;
    overflow: hidden;
}



조금 어색하지만 완성되었습니다.　

그 밖에도 여러가지 방법으로 파도를 만들 수 있다고 생각합니다만, 초보자 중의 초보자이므로, 크게 보아 주세요(ﾉД`)

그럼 또!
대화식으로 matplotlib로 그리기
CSS animation으로 놀기 - Attention-

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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