티스토리 뷰

Web

13. (과제) 내 홈페이지에 animation 적용하기

muru_ 2024. 5. 12. 21:49

과제. 홈페이지 첫 화면에 애니메이션 효과 적용하기

( index.html )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인 페이지</title>
    <link rel="stylesheet" href="./index.css">
  </head>
<body class="font">
    <div id="container">
      <header>
        <nav>
          <ul>
            <li class="title"><a href="./index.html">muru muru</a></li>
            <li class="menu1"><a href="./2. 하이퍼링크/news.html">NEWS</a></li>
            <li class="menu2"><a href="./2. 하이퍼링크/favorite.html">WEBSITE</a></li>
            <li class="menu3"><a href="./2. 하이퍼링크/resume.html">RESUME</a></li>
            <li class="btn"><a href="./3. 로그인 화면/login.html"><button>Login</button></a></li>
            <li class="btn"><a href="./3. 로그인 화면/regist.html"><button>Sign in</button></a></li>
          </ul>
        </nav>
      </header> 
      <hr>
      </div>
      <div id="main">
        <div id="loader">
          <p>LOADING...</p>
        </div>
      </div>
      <p>[SAKAMOTO DAYS]</p>
    </div>
</body>
</html>

 

( index.css )

@font-face {
    font-family: 'KCC-Hanbit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/KCC-Hanbit.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {   
    text-align: center;
    font-family: 'KCC-Hanbit';
    width: auto;
    height: auto;
    background-image: url(./img/배경3.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: rgba(31, 29, 29, 0.2); */
}

header > nav > ul {
    color: darkred;
    list-style: none;
    text-align: center;
    font-size: 20px;
}

li {
    display: inline-block;
}

li.menu1 {
    margin-left: 220px;
}
li.menu1 > a:visited, li.menu2 > a:visited, li.menu3 > a:visited {
    color: darkred;
}

li.menu1 > a:hover, li.menu2 > a:hover, li.menu3 > a:hover {
    color: orangered;
}

li.menu3 {
    margin-right: 300px;
}

li.menu2 {
    margin: 0 80px;
    margin-top: 33px;
}


li.title {
    font-weight: bold;
    margin-top: 18px;
    margin-left: 0;
    float: left;
    font-size: 40px;
}
li.title > a:visited {
    color: darkred;
}

li.btn > a > button{
    font-size: 18px;
    background-color: transparent;
    border-color: darkred;
    color: darkred;
    padding: 7px;
}

li.btn > a > button:hover {
    color: white;
    background-color: darkred;
}

hr {
    margin-top: 0;
    border-width: 1px;
    border-color: brown;
    border-style: double;
}

#main {
    margin: 0 auto;
    margin-top: 2%;
    height: 500px;
    width: 700px;
    background-image: url(./img/sakamoto.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#loader {
    margin: 0 auto;
    position: relative;
    height: 500px;
    width: 690px;
    background-color: rgba(0, 0, 0, 0.8);
    animation-name: gradation;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

#loader > p{
    position: relative;
    top: 43%;
    color: wheat;
    margin: 0 auto;
    font-size: 40px;
}

@keyframes gradation{
    0%{opacity: 1;}
    100%{opacity: 0;} 
}

 

 

( 결과 ) http://ehdguschkf47.dothome.co.kr/

접속했을 때 화면
서서히 사진 보이게하는 효과

 

'Web' 카테고리의 다른 글

15 .JavaScript while문, for문, 배열, 함수, 객체, 프로토타입, Math  (0) 2024.05.13
14. JavaScript 출력, 변수, 상수, 데이터타입, 타입변환, 대화상자, if문, switch문  (0) 2024.05.13
12. Html Css 우선순위, 변수, transform, animation  (0) 2024.04.12
11. Html Css 미디어 쿼리  (0) 2024.04.12
10. Html Css 레이아웃 (z-index, float, clear, n단 레이아웃)  (1) 2024.04.12
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함