css3實現的文字下滑出現效果程式碼例項

antzone發表於2017-03-13
CSSS3

分享一段程式碼例項，它實現了文字下滑出現效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  margin: 0;
  padding: 0;
}
.box {
  width: 40px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
.one {
  font-size: 80px;
  color: #f00;
  text-shadow: 5px 5px 5px rgba(255, 0, 0, 0.99);
  position: absolute;
  top: 0px;
  animation: myfirst 0.4s;
  -moz-animation: myfirst 0.4s; /* Firefox */
  -webkit-animation: myfirst 0.4s; /* Safari and Chrome */
  -o-animation: myfirst 0.4s; /* Opera */
}
.two {
  font-size: 80px;
  color: #f00;
  text-shadow: 5px 5px 5px rgba(255, 0, 0, 0.99);
  position: absolute;
  top: 130px;
  animation: two 0.8s;
  animation-delay: 0.8s;
  -moz-animation: two 0.8s; /* Firefox */
  -webkit-animation: two 0.8s; /* Safari and Chrome */
  -o-animation: two 0.8s; /* Opera */
}
.three {
  font-size: 80px;
  color: #f00;
  text-shadow: 5px 5px 5px rgba(255, 0, 0, 0.99);
  position: absolute;
  top: 250px;
  animation: three 1.2s;
  animation-delay: 1.2s;
  -moz-animation: three 1.2s; /* Firefox */
  -webkit-animation: three 1.2s; /* Safari and Chrome */
  -o-animation: three 1.2s; /* Opera */
}
.four {
  font-size: 80px;
  color: #f00;
  text-shadow: 5px 5px 5px rgba(255, 0, 0, 0.99);
  position: absolute;
  top: 361px;
  left: 5px;
  animation: four 1.6s;
  animation-delay: 1.6s;
  -moz-animation: four 1.6s; /* Firefox */
  -webkit-animation: four 1.6s; /* Safari and Chrome */
  -o-animation: four 1.6s; /* Opera */
}
.five {
  font-size: 80px;
  color: #f00;
  text-shadow: 5px 5px 5px rgba(255, 0, 0, 0.99);
  position: absolute;
  top: 480px;
  animation: five 2s;
  animation-delay: 2s;
  -moz-animation: five 2s; /* Firefox */
  -webkit-animation: five 2s; /* Safari and Chrome */
  -o-animation: five 2s; /* Opera */
}
@keyframes myfirst {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}
@-o-keyframes myfirst {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}
@-moz-keyframes myfirst {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}
@-webkit-keyframes myfirst {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}
@keyframes two {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 130px;
  }
}
@-o-keyframes two {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 130px;
  }
}
@-moz-keyframes two {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 130px;
  }
}
@-webkit-keyframes two {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 130px;
  }
}
@keyframes three {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 250px;
  }
}
@-o-keyframes three {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 250px;
  }
}
@-moz-keyframes three {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 250px;
  }
}
@-webkit-keyframes three {
  0% {
    left: 0px;
    top: -60px;
  }
  100% {
    left: 0px;
    top: 250px;
  }
}
@keyframes four {
  0% {
    top: -60px;
  }
  100% {
    top: 361px;
  }
}
@-o-keyframes four {
  0% {
    top: -60px;
  }
  100% {
    top: 361px;
  }
}
@-moz-keyframes four {
  0% {
    top: -60px;
  }
  100% {
    top: 361px;
  }
}
@-webkit-keyframes four {
  0% {
    top: -60px;
  }
  100% {
    top: 361px;
  }
}
@keyframes five {
  0% {
    top: -60px;
  }
  100% {
    top: 480px;
  }
}
@-o-keyframes five {
  0% {
    top: -60px;
  }
  100% {
    top: 480px;
  }
}
@-moz-keyframes five {
  0% {
    top: -60px;
  }
  100% {
    top: 480px;
  }
}
@-webkit-keyframes five {
  0% {
    top: -60px;
  }
  100% {
    top: 480px;
  }
}
</style>
</head>
<body>
  <div class="box">
    <div class="one">螞</div>
    <div class="two">蟻</div>
    <div class="three">部</div>
    <div class="four">落</div>
    <div class="five">go</div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼比較簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.text-shadow可以參閱CSS3 text-shadow一章節。

（2）.animation可以參閱CSS3 animation一章節。

（3）.animation-delay可以參閱CSS3 animation-delay一章節。

（4）.@keyframes可以參閱CSS3 @keyframes一章節。

相關文章