@keyframes, a:visited and a:active 애니메이션, 봤던글 표시하기

HTML CSS

@keyframes, a:visited and a:active 애니메이션, 봤던글 표시하기

svdjcuwg4638 2023. 5. 26. 11:48

@keyframes

동적인 효과를 보여주고싶을때 키프레임을 생성하여 태그에 추가해보자

css

@keyframes shake{
    0%{
        /* 애니메이션 시작점. 초기 상태 그대로 유지합니다. */
    }
    25%{
        /* 애니메이션 1/4 지점에서 요소를 오른쪽으로 3도 회전시킵니다. */
        transform:rotate(3deg)
    }
    50%{
        transform:rotate(0deg)
    }
    75%{
        transform:rotate(-3deg)
    }
    100%{
        transform:rotate(0deg)
    }
}

.reservation{
    /* animation-name 속성은 'shake' 키프레임 애니메이션을 이 클래스에 적용하는 데 사용됩니다. */
    animation-name: shake;

    /* animation-duration 속성은 애니메이션 한 주기를 완료하는 데 걸리는 총 시간을 정의합니다. 이 경우에는 1초입니다. */
    animation-duration: 1s;

    /* animation-timing-function 속성이 'linear'로 설정되어 있어 애니메이션은 시작부터 끝까지 동일한 속도를 가집니다. */
    animation-timing-function: linear;

    /* animation-iteration-count 속성은 애니메이션을 반복하는 횟수를 정의합니다. 여기서는 3번 반복됩니다. */
    animation-iteration-count: 3;

    /* animation-direction 속성은 애니메이션이 교대로 진행되는지 (즉, 애니메이션이 끝날 때마다 방향이 바뀌는지)를 지정합니다. */
    animation-direction: alternate;

    /* animation-fill-mode 속성은 애니메이션이 시작하기 전이나 끝난 후에 어떻게 작동해야 하는지를 정의합니다. 'none'으로 설정하면 애니메이션이 작동하지 않습니다. */
    animation-fill-mode: none;

    /* animation-play-state 속성은 애니메이션이 현재 실행 중인지 또는 일시 중지된 상태인지를 제어합니다. 'running'은 애니메이션이 현재 실행 중임을 의미합니다. */
    animation-play-state: running;
}

html

    <div class=".container-content">
        <div class="content_inner">
            <div class="wrap-text">
                <div class="text_inner">
                    <img src="./img/sofa.png" alt="">
                    <div class="info">
                        <div class="title reservation">예약 안내</div>
                        // reservation 적용되어서 애니메이션 효과가 적용된다.
                        
                        <div class="detail">스튜디오 대여는 사전에 인터넷 예약을 하셔야 합니다. 예약은 1일 이전까지 가능합니다.</div>
                    </div>
                </div>
                <div class="text_inner">
                    <img src="./img/candle.png" alt="">
                    <div class="info">
                        <div class="title">포토 갤러리</div>
                        <div class="detail">취업 사진, 가족 사진, 프로필 사진, 우정 사진 등 개인 또는 단체가 이용할 수 있습니다.</div>
                    </div>
                </div>
                
            </div>
            <div class="wrap-img">
                <div class="content">
                    <img src="./img/studio01.jpg" alt="">
                    <div class="title">촬영 스튜디오</div>
                    <div class="detail">카메라, 조명 등 촬영 장비 완비</div>
                </div>
                <div class="content">
                    <img src="./img/studio02.jpg" alt="">
                    <div class="title">촬영 스튜디오</div>
                    <div class="detail">카메라, 조명 등 촬영 장비 완비</div>
                </div>
                <div class="content">
                    <img src="./img/studio03.jpg" alt="">
                    <div class="title">촬영 스튜디오</div>
                    <div class="detail">카메라, 조명 등 촬영 장비 완비</div>
                </div>
                <div class="content">
                    <img src="./img/studio04.jpg" alt="">
                    <div class="title">촬영 스튜디오</div>
                    <div class="detail">카메라, 조명 등 촬영 장비 완비</div>
                </div>
            </div>
            
        </div>
        
    </div>

상단에 예약안내 태그에 css에서 만든

reservation을 추가하여 우리가 설정한 애니메이션 효과를 부여할 수 있다.

결과

a:visited, a:active

보통 게시물이나 웹툰사이트를보면은 내가 본것은 배경이 회색으로 표기되는것을 볼 수 있다.

우리도 한번 적용 시켜보자.

HTML/ CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

      a:visited,a:active{
          text-decoration: none;
          color:rgb(39, 37, 37);
      }

  </style>

</head>
<body>
  <a href="https://www.google.com">방문1</a>
  <a href="https://www.wikipedia.org">방문2</a>
  <a href="https://www.youtube.com">방문3</a>
  <a href="https://www.amazon.com">방문4</a>
  <a href="https://www.openai.com">방문5</a>
</body>
</html>

방문1과 방문3는 현재 방문한 이력이 있는 상태

2번을 방문하게 되면

이걸 color이아닌 background-color에 설정을 준다면 웹툰페이지와 같은 효과를 볼 수 있다.