CSS3特效-帧动画动起来

在油管上看到的一个教程, 感觉挺好玩的, 照着做了一下,代码没有几行,就是根据图片定位, 让每一帧动画显示出来。

  • 运行效果:
    CSS3特效-帧动画动起来_第1张图片

  • 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑起来</title>
    <style>
       
        .line{
            border-bottom: 7px dashed black;
        }

        .demo1{
            width: 128px;
            height: 220px;
            background-image: url("bob.png");
            animation:walk 1s steps(5) infinite,
                        forward 5s linear infinite;
        }
        .demo2{
            width: 85px;
            height: 85px;
            background-image: url("yingzi.jpg");
            animation:walk1 1s steps(7) infinite
                       ;
        }
        @keyframes walk{
            0%{
                background-position: 0px;
            }
            100%{
                background-position: 640px;
            }
        }
        @keyframes walk1{
            0%{
                background-position: 0px;
            }
            100%{
                background-position: 595px;
            }
        }
        @keyframes forward{
            0%{
               transform: translateX(-100px);
            }
            100%{
                transform: translateX(1200px);
            }
        }
    </style>
</head>
<body>
    <div class="demo1"></div>
    <div class="line"></div>

    <div class="demo2"></div>
    <div class="line"></div>
</body>
</html>

用到的两张图片:
CSS3特效-帧动画动起来_第2张图片
在这里插入图片描述

你可能感兴趣的:(css3特效)