纯css文字跳动音符效果

2018-11-13 08:37:36 分类：CSS 阅读(2453) 评论(0) 作者：全栈工程师

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css文字跳动音符效果</title>
<style>
html, body {
  width: 100%;  
  height: 100%;
  background: #76b852;
  background: -webkit-linear-gradient(to left, #76b852 , #8DC26F);
  background: -webkit-linear-gradient(right, #76b852 , #8DC26F);
  background: linear-gradient(to left, #76b852 , #8DC26F);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

h1 {
  height: 100px;
}

h1 span {
  position: relative;
  top: 20px;
  display: inline-block;
  -webkit-animation: bounce .3s ease infinite alternate;
          animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 80px;
  color: #FFF;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}

h1 span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; }
h1 span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; }
h1 span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; }
h1 span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; }
h1 span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; }
h1 span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; }
h1 span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; }

@-webkit-keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}

@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}</style>
</head>
<body>
<h1>
  <span>w</span>
  <span>a</span>
  <span>n</span>
  <span>g</span>
  <span>d</span>
  <span>a</span>
  <span>h</span>
  <span>a</span>
  <span>i</span>
</h1>

</body>
</html>

免费下载在线演示

×

本文出处：来自互联网信息共享，请勿相信收费信息站长资源 » 纯css文字跳动音符效果

标签：文字跳动效果

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册