css 애니매이션 질문 입니다.

css 애니매이션 질문 입니다.

QA

css 애니매이션 질문 입니다.

본문

text ...

 

이런식으로 마침표 한개씩 찍히고 사라지는 효과가 잘 안되네요..

그 로딩 되고 있다는 느낌을 주는 효과 거든요..

 

<!-- html -->

<button type="button">Detecting <span></span></button>

 


#main .container.step02 .doc_area .click button span {
    position:relative;
    color:transparent;
    min-width:11px;
    white-space: nowrap;
}
#main .container.step02 .doc_area .click button span:before {
  content: "...";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color:#fff;
  overflow: hidden;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing{
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

이 질문에 댓글 쓰기 :

답변 2


<!DOCTYPE html>
<html>
<body>
<style>
 button span {
    position:relative;
    color:transparent;
    min-width:11px;
    white-space: nowrap;
}
 button span:before {
  content: "...";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color:black;
  overflow: hidden;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing{
  0% {
    
      content: "...";
  }
    16% {
      content: "..";
  }
  32% {
    
      content: ".";
  }
   48% {
      content: "";
  }
  64%{
  
      content: ".";
  }
    80% {
   
      content: "..";
  }
  100% {
  
      content: "...";
  }
}
</style>
<button type="button">Detecting <span></span></button>

</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT