使用一张图片帧实现动画效果代码-html代码-BFW代码库

使用一张图片帧实现动画效果代码

代码语言：html

所属分类：动画

代码描述：使用一张图片帧实现动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        /* -------------- Animation -------------- */
        
        #animation {
          display: inline-block;
          position: relative;
          text-align: center;
        }
        
        
        
        /* -------------- Frame -------------- */
        
        .showRoll #frame {
          border-color: hsl(0,0%,70%);
        }
        
        #frame {
          width: 50px;
          height: 72px;
          border: 1px solid transparent;
          background: url(//repo.bfw.wiki/bfwrepo/image/6132b6e358f81.png) no-repeat left top;
          animation: frame-animation 1s steps(10) infinite;    
        }
        
        @keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
        
        
        
        /* -------------- Roll -------------- */
        
        .showRoll #roll {
          opacity: .2;
        }
        
        #roll {
          opacity: 0;
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          width: 500px;
          height: 72px;
          border: 1px solid hsl(0,0%,70%);
          background: hsl(0,0%,100%) url(//repo.bfw.wiki/bfwrepo/image/6132b6e358f81.png) no-repeat left top;
          transition: opacity .3s linear;
          animation:  roll-animation 1s steps(10) infinite;
        }
        
        @keyframes roll-animation { 
          0% { transform: translateX(0); } 
          100% { transform:  translateX(-500px); } 
        }
        
        
        
        
        /* Global ------------------------------------------------------ */
        
        html {
          height: 100%;
          font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
          background: #f0f0f0 url(../img/bg.png);
        }
        
        body {
          display:         flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 0;
          width: 100%;
          height: 100%;
          padding: 50px;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          text-align: center;
          overflow: hidden;
          text-align: center;      
        }
        
        a {
          text-decoration: none;
          color: hsl(210,100%,60%);
        }
        
        a:hover {
          color: hsl(210,100%,70%);
        }
        
        a:active {
          color: hsl(210,100%,50%);
        }
        
        p {
          font-size: 11px;
          line-height: 1.5;
          color: hsl(0,0%,60%);
        }
        
        .hl {
          color: hsl(0,0%,20%);
        }
        
        ul {
          margin: 40px 0;
          list-style: none;
          text-align: center;
          font-size: 14px;
          color: hsl(0,0%,60%);
        }
        .WebKit ul {
          text-align: left;
        }
        
        li {
          padding: 5px 0;
        }
        
        
        /* Show Sprite Checkbox ------------------------------------------------------ */
        
        .WebKit #show {
          -webkit-appearance: none;
          outline: none;
          border-radius: 20px;
          width: 20px;
          height: 20px;
          margin: -2px 6px 0 0;
          vertical-align: middle;
          border: 10px solid hsl(0,0%,80%);
          background: hsl(0,0%,40%);
          box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
          -webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
        }
        
        .WebKit #show:checked:active,
        .WebKit #show:active {
          border: 0px solid hsl(0,0%,80%);
          -webkit-transition-duration: .1;
        }
        
        .WebKit #show:checked {
          border: 5px solid hsl(0,0%,80%);
          box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 1px 0 hsla(0,0%,100%,.6);
        }
        
        
        
        
        
        /* Animation Duration ------------------------------------------------------ */
        
        #duration {
          display: inline-block;
          position: relative;
          margin: -4px 6px 0 0;
      .........完整代码请登录后点击上方下载按钮下载查看