CSS3动画效果——大话西游

通过CSS3的动画效果实现任务和背景的移动小案例

html：

<div class="wk"></div>

    <div class="bj"></div>

<div class="main">

        <ul>

            <li></li>

            <li></li>

        </ul>

    </div>

CSS：

* {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        html,

        body {

            height: 100%;

        }

        .main {

            width: 100%;

            height: 100%;

            background-size: cover;

            overflow: hidden;

        }

        .main ul {

            width: 4000px;

            height: 100%;

            animation: xiyou 30s linear infinite;

            position: absolute;

            top: 0;

            left: 0;

        }

        .main ul li {

            background-image: url(img/1.jpg);

            width: 100%;

            height: 100%;

            float: left;

            margin-left: -2000px;

        }

        @keyframes xiyou {

            from {

                left: 0;

            }

            to {

                left: 2000px;

            }

        }

        .wk {

            position: absolute;

            top: 55%;

            left: 30%;

            z-index: 999;

            width: 200px;

            height: 200px;

            background: url(img/west_01_3ca39fe.png) 0 0 no-repeat;

            animation: wkzou 1s steps(8) infinite;

        }

        @keyframes wkzou {

            to {

                background-position: -1600px 0;

            }

        }

        .bj {

            position: absolute;

            top: 55%;

            left: 50%;

            z-index: 999;

            width: 200px;

            height: 200px;

            background: url(img/west_02_47bad19.png) 0 0 no-repeat;

            animation: wkzou 1s steps(8) infinite;

        }

实现效果：

大话西游