css3多个数字滚动显示文字

<html> <head> <meta charset="utf-8"> <title>css3多个数字滚动显示文字内容特效演示</title>  <style type="text/css"> /* DaTouWang URL: www.datouwang.com */ body { text-align: center; background-color: #1d1f20; } .wrapper { position: absolute; top: 50%; left: 50%; width: 90%; font-size: 0; -webkit-transform: translate(-50%); transform: translate(-50%); } p { font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; font-size: 14px; font-weight: 500; color: #eee; opacity: 0.3; } .letter { width: 24px; display: inline-block; vertical-align: middle; position: relative; overflow: hidden; margin: 0 0; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; font-size: 24px; font-weight: 600; line-height: 24px; text-transform: uppercase; color: #eee; } .letter:before { position: absolute; top: 0; left: 0; width: 100%; word-break: break-all; background-color: #1d1f20; } .letter:nth-child(1):before { content: "4792036815"; margin-top: -48px; -webkit-animation-name: letter1; animation-name: letter1; -webkit-animation-duration: 0.13333s; animation-duration: 0.13333s; -webkit-animation-delay: 0.95s; animation-delay: 0.95s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter1 { from { margin-top: -48px; } to { margin-top: 24px; } } @keyframes letter1 { from { margin-top: -48px; } to { margin-top: 24px; } } .letter:nth-child(2):before { content: "0295176384"; margin-top: -96px; -webkit-animation-name: letter2; animation-name: letter2; -webkit-animation-duration: 2.56s; animation-duration: 2.56s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter2 { from { margin-top: -96px; } to { margin-top: 24px; } } @keyframes letter2 { from { margin-top: -96px; } to { margin-top: 24px; } } .letter:nth-child(3):before { content: "8562143079"; margin-top: -168px; -webkit-animation-name: letter3; animation-name: letter3; -webkit-animation-duration: 1.82s; animation-duration: 1.82s; -webkit-animation-delay: 0.48s; animation-delay: 0.48s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter3 { from { margin-top: -168px; } to { margin-top: 24px; } } @keyframes letter3 { from { margin-top: -168px; } to { margin-top: 24px; } } .letter:nth-child(4):before { content: "2471958306"; margin-top: -24px; -webkit-animation-name: letter4; animation-name: letter4; -webkit-animation-duration: 0.96s; animation-duration: 0.96s; -webkit-animation-delay: 0.52s; animation-delay: 0.52s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter4 { from { margin-top: -24px; } to { margin-top: 24px; } } @keyframes letter4 { from { margin-top: -24px; } to { margin-top: 24px; } } .letter:nth-child(5):before { content: "2360451897"; margin-top: -120px; -webkit-animation-name: letter5; animation-name: letter5; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-delay: 0.94s; animation-delay: 0.94s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter5 { from { margin-top: -120px; } to { margin-top: 24px; } } @keyframes letter5 { from { margin-top: -120px; } to { margin-top: 24px; } } .letter:nth-child(6):before { content: "4851906723"; margin-top: -216px; -webkit-animation-name: letter6; animation-name: letter6; -webkit-animation-duration: 2.88s; animation-duration: 2.88s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter6 { from { margin-top: -216px; } to { margin-top: 24px; } } @keyframes letter6 { from { margin-top: -216px; } to { margin-top: 24px; } } .letter:nth-child(7):before { content: "2156074938"; margin-top: -96px; -webkit-animation-name: letter7; animation-name: letter7; -webkit-animation-duration: 2.208s; animation-duration: 2.208s; -webkit-animation-delay: 0.31s; animation-delay: 0.31s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter7 { from { margin-top: -96px; } to { margin-top: 24px; } } @keyframes letter7 { from { margin-top: -96px; } to { margin-top: 24px; } } .letter:nth-child(8):before { content: "1867954302"; margin-top: -216px; -webkit-animation-name: letter8; animation-name: letter8; -webkit-animation-duration: 2.268s; animation-duration: 2.268s; -webkit-animation-delay: 0.37s; animation-delay: 0.37s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter8 { from { margin-top: -216px; } to { margin-top: 24px; } } @keyframes letter8 { from { margin-top: -216px; } to { margin-top: 24px; } } .letter:nth-child(9):before { content: "1452798306"; margin-top: -72px; -webkit-animation-name: letter9; animation-name: letter9; -webkit-animation-duration: 1.65s; animation-duration: 1.65s; -webkit-animation-delay: 0.45s; animation-delay: 0.45s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter9 { from { margin-top: -72px; } to { margin-top: 24px; } } @keyframes letter9 { from { margin-top: -72px; } to { margin-top: 24px; } } .letter:nth-child(10):before { content: "5012438697"; margin-top: -216px; -webkit-animation-name: letter10; animation-name: letter10; -webkit-animation-duration: 1.908s; animation-duration: 1.908s; -webkit-animation-delay: 0.47s; animation-delay: 0.47s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter10 { from { margin-top: -216px; } to { margin-top: 24px; } } @keyframes letter10 { from { margin-top: -216px; } to { margin-top: 24px; } } .letter:nth-child(11):before { content: "6027195483"; margin-top: -96px; -webkit-animation-name: letter11; animation-name: letter11; -webkit-animation-duration: 3.04s; animation-duration: 3.04s; -webkit-animation-delay: 0.05s; animation-delay: 0.05s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter11 { from { margin-top: -96px; } to { margin-top: 24px; } } @keyframes letter11 { from { margin-top: -96px; } to { margin-top: 24px; } } .letter:nth-child(12):before { content: "4692731805"; margin-top: -168px; -webkit-animation-name: letter12; animation-name: letter12; -webkit-animation-duration: 3.36s; animation-duration: 3.36s; -webkit-animation-delay: 0.04s; animation-delay: 0.04s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter12 { from { margin-top: -168px; } to { margin-top: 24px; } } @keyframes letter12 { from { margin-top: -168px; } to { margin-top: 24px; } } .letter:nth-child(13):before { content: "4738259106"; margin-top: -48px; -webkit-animation-name: letter13; animation-name: letter13; -webkit-animation-duration: 0.29333s; animation-duration: 0.29333s; -webkit-animation-delay: 0.89s; animation-delay: 0.89s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter13 { from { margin-top: -48px; } to { margin-top: 24px; } } @keyframes letter13 { from { margin-top: -48px; } to { margin-top: 24px; } } .letter:nth-child(14):before { content: "7018456293"; margin-top: -216px; -webkit-animation-name: letter14; animation-name: letter14; -webkit-animation-duration: 0.612s; animation-duration: 0.612s; -webkit-animation-delay: 0.83s; animation-delay: 0.83s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter14 { from { margin-top: -216px; } to { margin-top: 24px; } } @keyframes letter14 { from { margin-top: -216px; } to { margin-top: 24px; } } .letter:nth-child(15):before { content: "5764318209"; margin-top: -96px; -webkit-animation-name: letter15; animation-name: letter15; -webkit-animation-duration: 2.08s; animation-duration: 2.08s; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter15 { from { margin-top: -96px; } to { margin-top: 24px; } } @keyframes letter15 { from { margin-top: -96px; } to { margin-top: 24px; } } .letter:nth-child(16):before { content: "8730149265"; margin-top: -120px; -webkit-animation-name: letter16; animation-name: letter16; -webkit-animation-duration: 1.7s; animation-duration: 1.7s; -webkit-animation-delay: 0.49s; animation-delay: 0.49s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes letter16 { from { margin-top: -120px; } to { margin-top: 24px; } } @keyframes letter16 { from { margin-top: -120px; } to { margin-top: 24px; } } </style> </head> <body>  <div class="wrapper"> <div class="letters"> w w w . d a t o a w a n g . c o m </div> </div>  </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » css3多个数字滚动显示文字