CSS에서 카운트다운 페이지 넘김 애니메이션을 구현하는 방법-CSS 튜토리얼-php.cn

CSS에서 카운트다운 페이지 넘김 애니메이션을 구현하는 방법

coldplay.xixi

풀어 주다： 2023-01-03 09:29:43

원래의

4182명이 탐색했습니다.

CSS에서 카운트다운 페이지 넘김 애니메이션을 구현하는 방법: 먼저 외부 상자와 내부 상자를 설정한 다음 내부 상자의 움직이는 애니메이션의 [애니메이션 타이밍 기능] 단계를 사용하여 마지막으로 카운트다운이 끝나고 외부 상자 애니메이션이 사라집니다. .

CSS에서 카운트다운 페이지 넘김 애니메이션을 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS로 카운트다운 페이지 넘김 애니메이션 구현 방법:

구현 원리

a, 외부 상자 div.cell에서 한 단어의 너비와 높이가 너비와 높이를 초과하면 표시되지 않습니다. 한 단어만 표시될 수 있는지 확인하십시오.

b. 내부 상자 div.num은 가로 1문자, 행 높이 1문자입니다. 이 상자의 움직임을 통해 애니메이션을 구현합니다.

c. 내부 상자의 이동 애니메이션에는 stepanimation-timing-function

d를 사용하세요. 카운트다운이 끝나면 외부 상자의 애니메이션이 사라집니다.

구현 과정

자, html 파일을 살펴보겠습니다. 중국어 카운트다운도 그렇긴 한데, 중국어 웹폰트가 너무 적어서 아직 해보지 못해서 관심 있는 학생들은 해볼 수 있겠네요.

[html] view plain copy  
<div class="cell">  
  <div class="num">5 4 3 2 1 0</div>  
  <!--<div class="num">五 四 三 二 一 零</div>-->  
</div>

로그인 후 복사

CSS 부분은 prefix free와 normailize를 사용하고 있습니다. 또한, 영문 폰트를 구현하기 위해선 이 파일을 import해야 합니다

http://fonts.googleapis.com/css?family=Allura. |Frijole|Varela+ Round

[css] view plain copy  
body{  
  background:#333;  
}  
.cell{  
    width: 1em;    
    height: 1em;  
    border:1px dashed rgba(255,255,255,0.1);  
    font-size:120px;  
    font-family:Frijole;  
    overflow: hidden;  
    position:absolute;  
    top:50%;  
    left:50%;  
    margin:-0.5em 0 0  -0.5em;  
    opacity:0;  
    animation:go 6s;  
    transform-origin:left bottom;  
}  
.num{  
    position:absolute;  
    width: 1em;  
    color:#E53F39;  
    line-height: 1em;    
    text-align: center;  
    text-shadow:1px 1px 2px rgba(255,255,255,.3);  
    animation:run 6s steps(6);  
}  
@keyframes run{  
    0%{top:0;}  
    100%{top:-6em;}  
}  
@keyframes go{  
  0%   {opacity:1;}  
  84%  {opacity:1;transform:rotate(0deg) scale(1);}  
  100% {opacity:0;transform:rotate(360deg) scale(.01);}  
}

로그인 후 복사