jquery+css实现字母文字隔断翻转动画效果代码-html代码-BFW代码库

jquery+css实现字母文字隔断翻转动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery+css实现字母文字隔断翻转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url(http://fonts.googleapis.com/css?family=Roboto:100,600);
        * {
          margin: 0;
          padding: 0;
        }
        
        body {
          display: table-cell;
          vertical-align: middle;
          background-color: cornflowerblue;
        }
        
        h1 {
          font: 100% "Roboto", sans-serif;
          line-height: normal;
          color: #aadff9;
          font-size: 50px;
          font-weight: 100;
        }
        
        .content {
          position: absolute;
          top: 50%;
          left: 40%;
          margin: -32px 0 0 -145px;
        }
        .content::after, .content::before {
          color: #000;
          font-size: 42px;
          -o-animation: 2s ease-out 0s normal none infinite opacity;
          -moz-animation: 2s ease-out 0s normal none infinite opacity;
          -webkit-animation: 2s ease-out 0s normal none infinite opacity;
          animation: 2s ease-out 0s normal none infinite opacity;
        }
        
        #word {
          margin-top: 0;
          padding-left: 110px;
          text-align: left;
          list-style: none;
          -o-animation: 6s linear 0s normal none infinite change;
          -moz-animation: 6s linear 0s normal none infinite change;
          -webkit-animation: 6s linear 0s normal none infinite change;
          animation: 6s linear 0s normal none infinite change;
        }
        #word li {
          line-height: 40px;
          margin: 0;
        }
        
        @-webkit-keyframes opacity {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @-moz-keyframes opacity {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @-ms-keyframes opacity {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @keyframes opacity {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @-webkit-keyframes change {
          0% {
            margin-top: 0;
          }
          15% {
            margin-top: 0;
          }
          25% {
            margin-top: -40px;
          }
          40% {
            margin-top: -40px;
          }
          50% {
            margin-top: -80px;
          }
          65% {
            margin-top: -80px;
          }
          75% {
            margin-top: -40px;
          }
          85% {
            margin-top: -40px;
          }
          100% {
            margin-top: 0;
          }
        }
        @-moz-keyframes change {
          0% {
            margin-top: 0;
          }
          15% {
            margin-top: 0;
          }
          25% {
            margin-top: -40px;
          }
          40% {
            margin-top: -40px;
          }
          50% {
            margin-top: -80px;
          }
          65% {
            margin-top: -80px;
          }
          75% {
            margin-top: -40px;
          }
          85% {
            margin-top: -40px;
          }
          100% {
            margin-top: 0;
          }
        }
        @-ms-keyframes change {
          0% {
            margin-top: 0;
          }
          15% {
            margin-top: 0;
          }
          25% {
            margin-top: -40px;
          }
          40% {
            margin-top: -40px;
          }
          50% {
            margin-top: -80px;
          }
          65% {
            margin-top: -80px;
          }
          75% {
            margin-top: -40px;
          }
          85% {
            margin-top: -40px;
          }
          100% {
            margin-top: 0.........完整代码请登录后点击上方下载按钮下载查看