css 跳动文字

前端

代码

  1. <h1 class=“css-jump”>  
  2.   <span>C</span>  
  3.   <span>S</span>  
  4.   <span>S</span>  
  5.   <span>跳</span>  
  6.   <span>动</span>  
  7.   <span>文</span>  
  8.   <span>字</span>  
  9. </h1>  
  10.   
  11. <style>  
  12.   /* 跳动文字 */  
  13.   .css-jump {  
  14.     cursor: default;  
  15.     position: absolute;  
  16.     top: 0;  
  17.     left: 0;  
  18.     right: 0;  
  19.     bottom: 0;  
  20.     width: 100%;  
  21.     height: 100px;  
  22.     margin: auto;  
  23.     display: block;  
  24.     background: #e0e0e0;  
  25.     padding: 30px 0;  
  26.     text-align: center;  
  27.   }  
  28.   
  29.   .css-jump span {  
  30.     position: relative;  
  31.     top: 20px;  
  32.     display: inline-block;  
  33.   
  34.     animation: bounce .3s ease infinite alternate;  
  35.   
  36.     font-family: ‘Titan One’, cursive;  
  37.     font-size: 80px;  
  38.     color: #FFF;  
  39.     text-shadow: 0 1px 0 #CCC,  
  40.       0 2px 0 #CCC,  
  41.       0 3px 0 #CCC,  
  42.       0 4px 0 #CCC,  
  43.       0 5px 0 #CCC,  
  44.       0 6px 0 transparent,  
  45.       0 7px 0 transparent,  
  46.       0 8px 0 transparent,  
  47.       0 9px 0 transparent,  
  48.       0 10px 10px rgba(0, 0, 0, .4);  
  49.   }  
  50.   
  51.   .css-jump span:nth-child(2) {  
  52.     animation-delay: .1s;  
  53.   }  
  54.   
  55.   .css-jump span:nth-child(3) {  
  56.     animation-delay: .2s;  
  57.   }  
  58.   
  59.   .css-jump span:nth-child(4) {  
  60.     animation-delay: .3s;  
  61.   }  
  62.   
  63.   .css-jump span:nth-child(5) {  
  64.     animation-delay: .4s;  
  65.   }  
  66.   
  67.   .css-jump span:nth-child(6) {  
  68.     animation-delay: .5s;  
  69.   }  
  70.   
  71.   .css-jump span:nth-child(7) {  
  72.     animation-delay: .6s;  
  73.   }  
  74.   
  75.   /* 动画 */  
  76.   @keyframes bounce {  
  77.     100% {  
  78.       top: -20px;  
  79.   
  80.       text-shadow: 0 1px 0 #CCC,  
  81.         0 2px 0 #CCC,  
  82.         0 3px 0 #CCC,  
  83.         0 4px 0 #CCC,  
  84.         0 5px 0 #CCC,  
  85.         0 6px 0 #CCC,  
  86.         0 7px 0 #CCC,  
  87.         0 8px 0 #CCC,  
  88.         0 9px 0 #CCC,  
  89.         0 50px 25px rgba(0, 0, 0, .2);  
  90.     }  
  91.   }  
  92. </style>  

@keyframes使用说明

使用@keyframes规则，创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，可多次更改CSS样式的设定。

指定的变化时发生时使用％，或关键字”from”和”to”，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

本文链接地址: css 跳动文字

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注