[HTML] Slide

설계

 

문장들을 회전하게만들고 중앙 부분은 진하게 양쪽은 투명하게 만들도록 하겠습니다.

 

 

 

 

@keyframes slide {
    0% {
      transform: translateY(0);
    }
    6% {
      transform: translateY(-17.5%);
    }
    33.3% {
      transform: translateY(-17.5%);
    }
    39.3% {
      transform: translateY(-35%);
    }
    66.6% {
      transform: translateY(-35%);
    }
    72.6% {
      transform: translateY(-52%);
    }
    100% {
      transform: translateY(-52%);
    }
  }
  .slide {
    height: 14rem;
    overflow: hidden;
    /* background-color: aqua; */
    /* animation: slide 2s linear; */
  }
  .slide div {
    animation: slide 5s linear infinite;
  }
  .slide h2 {
    font-size: 2.5rem;
    text-align: center;
    margin: 1rem 0;
    color: darkblue;
    opacity: 0.1;
  }
  @keyframes text1 {
    0% {
      opacity: 1;
      font-size: 2.6rem;
    }
    6% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    33.3% {
    }
    39.3% {
    }
    66.6% {
    }
    72.6% {
    }
    100% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
  }
  .slide div h2:nth-child(2) {
    animation: text1 5s linear infinite;
  }
  @keyframes text2 {
    0% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    6% {
      opacity: 1;
      font-size: 2.6rem;
    }
    33.3% {
      opacity: 1;
      font-size: 2.6rem;
    }
    39.3% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    66.6% {
    }
    72.6% {
    }
    100% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
  }
  .slide div h2:nth-child(3) {
    animation: text2 5s linear infinite;
  }
  
  @keyframes text3 {
    0% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    6% {
    }
    33.3% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    39.3% {
      opacity: 1;
      font-size: 2.6rem;
    }
    66.6% {
      opacity: 1;
      font-size: 2.6rem;
    }
    72.6% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    100% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
  }
 .slide div h2:nth-child(4) {
    animation: text3 5s linear infinite;
  }
  
  @keyframes text4 {
    0% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    6% {
    }
    33.3% {
    }
    39.3% {
    }
    66.6% {
      opacity: 0.1;
      font-size: 2.5rem;
    }
    72.6% {
      opacity: 1;
      font-size: 2.6rem;
    }
    100% {
      opacity: 1;
      font-size: 2.6rem;
    }
  }
  .slide div h2:nth-child(5) {
    animation: text4 5s linear infinite;
  }

 

@keyframse

 

@keyframse 는 CSS 애니메이션 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다.

 

@keyframse를 사용하기 위해선 세가지가 필요하다.

• animation-name:사용자가 직접 지정한 이름,@keyframse가 적용될 애니메이션의 이름
• 스테이지: from-to 로 0~100%의 구간
• CSS 스타일: 각 스테이지(구간)에 적용시킬 스타일

 

 

opacity

 

opacity로 요소의 투명도를 정할 수 있다.

• 기본값:1
• 상속:no
• 애니메이션:yes
• 버전:CSS Level3
• 숫자가 클수록 불투명하고, 숫자가 작을 수록 투명해진다.

갤러리 게시판에서 마우스를 올렸을때, 기본과 다른 효과 주거나 이미지 배경 위에 문서 작성 시 글자 잘 보이게 배경색 줄 때 사용된다.

opacity 속성 경우, 지식요소에 상속되어 배경과 글자까지 모두 투명해져 글자가 선명하게 안 보임(이 경우엔 rgba 색상코드 이용해 배경색 표현

ex) 

background:rgba (255, 255, 255, 0.5)

*0.5 부분이 불투명도에 해당.(0:완전 투명 ~ 1:완전 불투명)