/* * author: wei * time: 2015-01-25 * Techblog: http://www.cnblogs.com/aiweidong/ * */ html{overflow: hidden;} body{margin: 0; background-color: #67ace4; font-family: "\5FAE\8F6F\96C5\9ED1"; _padding-top: 100px;} ::selection{background: none;} ::-moz-selection{background: none;} #wrap{margin: 100px auto 0; width: 399px;} #text{text-align: center; padding-top: 20px;} #text strong{display: inline-block; font-size: 14px; font-weight: normal;} #text strong *{float: left;} #text span{width: 128px; height: 29px; background: url(../images/info.png) no-repeat;} #text a{line-height: 14px; color: #fff; text-decoration: none; padding: 6px 14px; margin: 1px 0 0 10px; border: 1px solid #fff; border-radius: 14px; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transition: 0.2s ease-out; -o-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -webkit-transition: 0.2s ease-out; } #text a:hover, #text a:active{background: #fff; color: #000;} @media screen and (max-width: 414px) { #wrap, #wrap img, #text span{width: 200px;} #text span{background-position: center; margin-bottom: 16px;} #text a:nth-of-type(1){margin-left: 0;} } .animate{ animation: 20s animate linear infinite alternate; -o-animation: 20s animate linear infinite alternate; -moz-animation: 20s animate linear infinite alternate; -webkit-animation: 20s animate linear infinite alternate; } .below, .above{position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%;} .below{height: 173px; background: url(../images/below.png) no-repeat;} .above{height: 149px; background: url(../images/above.png) no-repeat -60px 0; animation-name: animate-above; -o-animation-name: animate-above; -moz-animation-name: animate-above; -webkit-animation-name: animate-above; } @keyframes animate{ 0%{background-position: 0 0;} 10%{background-position: -10px 1px;} 20%{background-position: -10px 3px;} 30%{background-position: -20px 1px;} 40%{background-position: -40px 2px;} 50%{background-position: -60px 4px;} 60%{background-position: -40px 2px;} 70%{background-position: -20px 4px;} 80%{background-position: -10px 3px;} 90%{background-position: -10px 1px;} 100%{background-position: 0 0;} } @-o-keyframes animate{ 0%{background-position: 0 0;} 10%{background-position: -10px 1px;} 20%{background-position: -10px 3px;} 30%{background-position: -20px 1px;} 40%{background-position: -40px 2px;} 50%{background-position: -60px 4px;} 60%{background-position: -40px 2px;} 70%{background-position: -20px 4px;} 80%{background-position: -10px 3px;} 90%{background-position: -10px 1px;} 100%{background-position: 0 0;} } @-moz-keyframes animate{ 0%{background-position: 0 0;} 10%{background-position: -10px 1px;} 20%{background-position: -10px 3px;} 30%{background-position: -20px 1px;} 40%{background-position: -40px 2px;} 50%{background-position: -60px 4px;} 60%{background-position: -40px 2px;} 70%{background-position: -20px 4px;} 80%{background-position: -10px 3px;} 90%{background-position: -10px 1px;} 100%{background-position: 0 0;} } @-webkit-keyframes animate{ 0%{background-position: 0 0;} 10%{background-position: -10px 1px;} 20%{background-position: -10px 3px;} 30%{background-position: -20px 1px;} 40%{background-position: -40px 2px;} 50%{background-position: -60px 4px;} 60%{background-position: -40px 2px;} 70%{background-position: -20px 4px;} 80%{background-position: -10px 3px;} 90%{background-position: -10px 1px;} 100%{background-position: 0 0;} } @keyframes animate-above{ 0%{background-position: -60px 0;} 10%{background-position: -50px 8px;} 20%{background-position: -35px 10px;} 30%{background-position: -20px 10px;} 40%{background-position: -30px 16px;} 50%{background-position: -10px 20px;} 60%{background-position: -20px 20px;} 70%{background-position: -30px 12px;} 80%{background-position: -40px 10px;} 90%{background-position: -50px 10px;} 100%{background-position: -60px 0;} } @-o-keyframes animate-above{ 0%{background-position: -60px 0;} 10%{background-position: -50px 8px;} 20%{background-position: -35px 10px;} 30%{background-position: -20px 10px;} 40%{background-position: -30px 16px;} 50%{background-position: -10px 20px;} 60%{background-position: -20px 20px;} 70%{background-position: -30px 12px;} 80%{background-position: -40px 10px;} 90%{background-position: -50px 10px;} 100%{background-position: -60px 0;} } @-moz-keyframes animate-above{ 0%{background-position: -60px 0;} 10%{background-position: -50px 8px;} 20%{background-position: -35px 10px;} 30%{background-position: -20px 10px;} 40%{background-position: -30px 16px;} 50%{background-position: -10px 20px;} 60%{background-position: -20px 20px;} 70%{background-position: -30px 12px;} 80%{background-position: -40px 10px;} 90%{background-position: -50px 10px;} 100%{background-position: -60px 0;} } @-webkit-keyframes animate-above{ 0%{background-position: -60px 0;} 10%{background-position: -50px 8px;} 20%{background-position: -35px 10px;} 30%{background-position: -20px 10px;} 40%{background-position: -30px 16px;} 50%{background-position: -10px 20px;} 60%{background-position: -20px 20px;} 70%{background-position: -30px 12px;} 80%{background-position: -40px 10px;} 90%{background-position: -50px 10px;} 100%{background-position: -60px 0;} }