[CSS] toy project HTML & 커리큘럼 페이지(체크css, 그림자, 떠오르는 애니메이션, 오르내리는 애니메이션, 프로그레스바)

1. HTML & CSS 섹션

1. 초록색 체크 표시

/* 초록색 체크표시 */

.html-css__spec dd::before {

  content: "";

  display: inline-block;

  margin-right: 0.4em;

  width: 12px;

  height: 6px;

  border-left: 4px solid var(--color-sub);

  border-bottom: 4px solid var(--color-sub);

  vertical-align: 0.2em;

  transform: rotate(-45deg);

}

 

2. 로고 아래 그림자 

 

.html-css__thumb {

  position: relative;

}

/* 로고 아래 그림자 */

.html-css__thumb::after {

  content: "";

  position: absolute;

  left: 0;

  height: 10%;

  background-color: black;

  border-radius: 50%;

}

 

3. 로고 오르내리는 애니메이션

 

* 둥둥 오르내리는 효과 */

@keyframes logo-hover {

  from {

    transform: translateY(0);

  }

  to {

    transform: translateY(10px);

  }

}

.html-css__logo {

  animation-name: logo-hover;

  animation-duration: 800ms;

  animation-timing-function: ease-in-out;

  animation-iteration-count: infinite;

  animation-direction: alternate;

}

 

4.  오르내림에 따른 그림자 

/* 짙고 옅어지는 애니메이션 */

@keyframes logo-shadow {

  from {

    opacity: 0.08;

  }

  to {

    opacity: 0.24;

  }

}

.html-css__thumb::after {

  animation-name: logo-shadow;

  animation-duration: 800ms;

  animation-timing-function: ease-in-out;

  animation-iteration-count: infinite;

  animation-direction: alternate;

}

 

 

 

2. 커리큘럼 페이지

1. 글씨 눕히기

.curriculum__list li span {

    

    display: inline-block;

 

   /* 글자 수에 관계없이 통일된 위치로 기울어지도록 */

    width: 164px;

    position: absolute;

    z-index: 1;

    top: 84px;

    left: 14px;

    opacity: 0.5;

    transform: rotate(45deg);

  }

 

 

2. 프로그레스바 

.curriculum__progress {

    top: 70px;

    left: 56px;

    width: 1000px;

    height: 8px;

    background-color: rgba(255, 255, 255, 0.1);

  }

  .curriculum__progress::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background-color: var(--color-sub);

    width: 0;

    height: 8px;

    transition: all 1s;

  }

  .curriculum__list li:hover::before {

    background-color: var(--color-sub);

  }

  .curriculum__list li:nth-child(2):hover ~ .curriculum__progress::after {

    width: 200px;

  }

  .curriculum__list li:nth-child(3):hover ~ .curriculum__progress::after {

    width: 400px;

  }

  .curriculum__list li:nth-child(4):hover ~ .curriculum__progress::after {

    width: 600px;

  }

  .curriculum__list li:nth-child(5):hover ~ .curriculum__progress::after {

    width: 800px;

  }

  .curriculum__list li:nth-child(6):hover ~ .curriculum__progress::after {

    width: 1000px;

  }