비주얼 스튜디오 코드 34 _ 애니메이션 효과

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제

조반짝 2023. 6. 15. 16:13

728x90

html 골격잡아주기

body 안에 section태그로 박스 잡아주기

css에서 편집해주기

1. body에 화면 배경색과 크기를 잡아준다.

2. section 편집 : 박스를 만들어주고 section (작업할 영역)위치를 잡아준다.

h1 태그로 제목 넣어주기

css 에서 h1 편집

position띄워서 위치를 잡아준다.

구글폰트에서 웹폰트 가져오기

h1에 font-family: .. 웹폰트를 가져온다.

폰트 명령어 간소화하기

▼

font: 폰트크기 / 줄간격 '폰트종류' ;

<html >

section 안에 article태그를 넣어준다.

article에 class이름을 sky이라고 지정

article에 이미지를 넣어준다.

css > article 편집해주기

이미지 sky, sun위치 잡아주기

각각 이미지에 position:absolute; 를 띄워줘서 기준점을 잡고 위치시켜줘야한다.

sun 이미지 가운데로 보내주는 방법 2가지

1) 이미지파일 크기 모를 때

transform: translateX(-50%);

2) 이미지 파일 크기를 알고 있을때

margin-left: -100px; >> 단, sun 파일 크기가 가로가 200px 이기 떄문에 가능 하다.

구름 위치 시켜주기

관람차 넣어주기

section에 또다른 article 을 넣어준다.

article 안에 관람차 이미지를 넣어줌

article 안에 건물 이미지도 넣어준다.

css 편집

이미지 크기를 확인해서 밤건물과 낮건물의 이미지 크기가 같은 지 확인한다.

낮건물과 밤건물을 똑같은 위치에 포지션을 띄워야한다.

관람차 왼쪽으로 움직여 주는 2가지 방법

① margin-left : -170px;

② transform: translateX(-70%);

사람 넣어주기

section에 또다른 article 을 넣어준다.

article 안에 사람 이미지를 넣어줌

css 사람 편집

사람도 position 띄워줘야함

애니메이션 효과주기

sky 애니메이션 넣어주기

body에 애니메이션 명령어를 넣어준다.

body 밑에 @keyframes sky 이름을 지정하여 %별로 색깔을 넣어주면

20초마다 무한대로 색이 변경된다.

sky 색이 20초마다 서서히 변하는걸 볼 수 있다.

h1 애니메이션 효과

h1 에 투명 효과 준다.

h1가 처음과 끝은 투명이고 중간에 h1이 나오게 된다.

sun 애니메이션 효과 주기

sun의 중심축을 잡아주어야한다.

기준 중심축이 해의 중심의 500px이다.

0%로 되돌아가는 sun 가려주기

관람차 애니메이션 넣기

rotate를 명령으로 관람차 제자리에서 회전시켜준다.

밤 애니메이션 주기

구름 애니메이션 효과 주기

같은 이름인 flow로 사람 애니메이션 넣어주기

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마을의 하루</title>
    <link rel="stylesheet" href="./css/style.css">

    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Have a Good Day!!</h1>
    <section>
        <article class="sky">
            <img src="./img_town/sun.png" alt="해 이미지" class="sun">
            <img src="./img_town/cloud1.png" alt="구름 이미지" class="cloud1">
            <img src="./img_town/cloud2.png" alt="구름 이미지" class="cloud2">
        </article>
        
        <article class="town">
            <img src="./img_town/circle.png" alt="관람차 이미지" class="circle">
            <img src="./img_town/town_night.png" alt="밤 건물 이미지" class="night">
            <img src="./img_town/town_day.png" alt="낮 건물 이미지" class="day">
        </article>

        <article class="people">
            <img src="./img_town/man.png" alt="자전거 탄 아이" class="man">
            <img src="./img_town/family.png" alt="가족나들이 이미지" class="family">
        </article>
    </section>   
</body>
</html>

<css>

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    /* 화면 전체사용 */
    height: 100vh;
    background-color: #b1e1e2;
    overflow: hidden;
    /* 화면을 잘라서 봄, 스크롤바가 안나옴 */

    /* 애니메이션 효과 */
    animation: sky linear 20s infinite;
    
}
@keyframes sky{
    0%{background-color: #b08fcc;}
    25%{background-color: #b1e1e2;}
    50%{background-color: #fcd2e2;}
    75%{background-color: #636888;}
    100%{background-color: #b08fcc;}
}
h1{
    width: 1000px;
    /* h1 위치 잡아주기 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,150%);
    text-align: center;
    color: #fff;
    /* 폰트 명령어 줄여서 가져오기 */
    font: 90px/1 'Poiret One';

    /* font-size: 90px;
    line-height: 1;
    font-family: 'Poiret One', cursive; */

    /* 애니메이션 효과 */
    animation: opacity linear 20s infinite;
}
@keyframes opacity{
    0%{opacity: 0;}
    20%{opacity: 1;}
    50%{opacity: 1;}
    75%{opacity: 0;}
    100%{opacity: 0;}
}

section{
    width: 1000px;
    height: 400px;
    border: 1px solid red;
    
    /* section 위치 잡아주기 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
}

section .sky{
    width: 100%;
    height: 100%;
    /* section에 포지션을 띄워놨기 때문에 자동으로 기준이 된다. */
    position: absolute;
}
section .sky .sun{
    /* sun 이미지 위치 잡아주기 */
    position: absolute;
    top: -150px;
    left: 50%;
    /* transform: translateX(-50%); */
    margin-left: -100px; /* sun가운데로 위치시키기 > 단, sun파일 크기가 가로가 200px이기 때문에 가능(이미지 크기를 알 때 사용하면 됨)*/
    
    /* 애니메이션 효과 */
    /* 중심축 */
    transform-origin: center 500px;
    animation: sun linear 20s infinite;
}
@keyframes sun {
    0%{transform: rotate(-90deg);
        opacity: 0;
    }
    25%{transform: rotate(-30deg);
        opacity: 1;
    }   
    50%{transform: rotate(30deg);
        opacity: 1;
    }   
    75%{transform: rotate(90deg);
        opacity: 0;
    }   
    100%{transform: rotate(-90deg);
        opacity: 0;
    }   
}

section .sky .cloud1{
    position: absolute;
    top: -30px;
    left: 10%;

    /* 애니메이션효과 */
    animation: flow linear 10s infinite;
}
@keyframes flow{
    0%{left:0; opacity: 0;}
    10%{opacity: 1;}
    90%{opacity: 1;}
    100%{left:90%; opacity: 0;}
}

section .sky .cloud2{
    position: absolute;
    top: 20px;
    left: 0%;

    /* 애니메이션효과 */
    animation: flow linear 20s infinite;
}


section .town{}
section .town .circle{
    position: absolute;
    bottom: 100px;
    left: 50%;
    /* 관람차 왼쪽으로 움직여주기 */
    /* margin-left: -160px; */
    transform: translateX(-70%);

    /* 애니메이션 효과 */
    animation: rotation linear 20s infinite;
}
@keyframes rotation{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
section .town .night{
    position: absolute;
    bottom: 0px;
    left: 40px;
    
}
section .town .day{
    position: absolute;
    bottom: 0px;
    left: 40px;

    animation: opacity linear 20s infinite;
    /* h1 opacity에 이미 keyframes 넣어서 keyframes 안넣어도됨 */
}

section .people{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
section .people .man{
    position: absolute;
    bottom: 0;
    left: 0;

      /* 애니메이션효과 */
      animation: flow linear 20s infinite;
}
section .people .family{
    position: absolute;
    bottom: 0;
    left: 0;

     /* 애니메이션효과 */
     animation: flow linear 30s infinite;
}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 36_ 웹표준) header (0)	2023.06.16
비주얼 스튜디오 코드 _ 35 로딩 애니메이션 (0)	2023.06.16
비주얼 스튜디오 코드 33 _ 프로필 카드 만들기 (0)	2023.06.15
비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기 (0)	2023.06.14
비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너 (0)	2023.06.14

현재글비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

자바스크립트, Parallax, CSS, JavaScript, SQL, 비주얼스튜디오코드, 웹디자인, 이클립스, 프론트엔드, offset, 자바, position, float, HTML, For문, Java, ACTIVE, if문, 코딩테스트, media,

Today :
Yesterday :

조반짝의 도전일지