多背景幕布形式的动画效果实现-优快云博客

本文介绍了一种使用HTML和CSS实现多背景幕布形式的动画效果，包括幕布的移动、大小变化等关键操作，通过关键帧动画展示如何在网页中创建动态的视觉体验。

多背景幕布形式拉开和关闭效果：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>多背景</title>
    <style>
        @-webkit-keyframes move
        {
            0%
            {
                -webkit-animation-timing-function:ease;
                background-position:0 0,0 298px,center,0 0, 0 0;
                background-size:auto,auto,0 0,auto,auto;
            }
            40%
            {
                background-position:0 -292px,0 610px,center,0 0,0 0;
                background-size:auto,auto,0 0,auto,auto;
            }
            85%
            {
                background-position:0 -292px,0 610px,center,0 0,0 0;
                background-size:auto,auto,344px 432px,auto,auto;
            }
            100%
            {
                background-position:0 -292px,0 610px,center,0 0,0 0;
                background-size:auto,auto,344px 432px,auto,auto;
            }
        }
        #box
        {
            width:1024px; height:615px; margin:0 auto; background:url(Images/new-top.png) no-repeat,url(Images/new-bottom.png) no-repeat 0 298px,url(Images/html5_logo.png) no-repeat center,url(Images/new_star.png) no-repeat,url(Images/new_bg.png) no-repeat;  /*第一处背景图在最上面*/
            background-size:auto,auto,0 0,auto,auto;
            -webkit-animation-name:move;
            -webkit-animation-duration:3s;
            -webkit-animation-direction:alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/
            -webkit-animation-iteration-count:2; /*规定动画被播放的次数。默认是 1。*/
            -webkit-animation-delay:1s;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
</body>
</html>