使用一张图片帧实现动画效果代码-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 s.........完整代码请登录后点击上方下载按钮下载查看