移动端web(1)：进场动画

最新推荐文章于 2026-03-12 10:12:03 发布

原创最新推荐文章于 2026-03-12 10:12:03 发布 · 4.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#移动 #web-app

javascript 同时被 3 个专栏收录

16 篇文章

订阅专栏

css

11 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文介绍了一个使用CSS3实现的动画案例，包括图标震动、页面淡入淡出等效果，并详细展示了如何通过HTML、CSS和JavaScript代码来实现这些动画，特别关注了动画的兼容性和预加载图片的处理。

首先看效果图：
这里写图片描述

大体效果就是这样，截图的效果不好，有帧的丢失。

注意的几点：
1.小图标震动基点（变换基点）的设置，三朵云的尺寸大小控制，都是CSS3中的新属性。
2.进场页面淡出然后显示首页，淡出的时机是动画执行结束了并且首页预加载图片完成。
3.为了兼容性，执行动画的一些属性应该写两个版本，一个带-webkit-,一个不带，例如： -webkit-animation、animation。
4.为了阻止动画结束时元素不显示，应加上-webkit-animation-fill-mode:forwards。

下面直接上代码。

html页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=640,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <!-- animation 动画
        animation-fill-mode:forwards;
    图片预加载处理
    transition 消失动画
    transitionEnd -->

    <script type="text/javascript">
        document.body.style.height = myView().h+"px";
        document.body.style.width = myView().w + "px";
    </script>
    <section class="page pageShow" id="welcome">
        <div class="tree">
            <img src="img/tree.jpg" />
            <div class="welcome2">
                <img src="img/title.png" />
                <span class="shake"></span>
            </div>
            <img src="img/title2.png" class="tree3" />
            <span class="cloud"></span>
            <span class="cloud"></span>
            <span class="cloud"></span>
        </div>
        <h1 id="logo">
            <img src="img/logo.png" />
        </h1>
    </section>
    <section class="page">上传成功</section>
    <section class="page">表单页</section>
    <section class="page">新闻页</section>
    <section class="page">跳转页</section>
    <section class="page pageShow">首页</section>
<script type="text/javascript">
    fnLoad();
</script>
</body>

</html>

js代码：

// JavaScript Document
function id(obj) {
    return document.getElementById(obj);
}
function bind(obj, ev, fn) { 
    if (obj.addEventListener) {
        obj.addEventListener(ev, fn, false);
    } else {
        obj.attachEvent('on' + ev, function() {
            fn.call(obj);
        });
    }
}
function myView() {
    return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
    };
}
function addClass(obj, sClass) { 
    var aClass = obj.className.split(' ');
    if (!obj.className) {
        obj.className = sClass;
        return;
    }
    for (var i = 0; i < aClass.length; i++) {
        if (aClass[i] === sClass) return;
    }
    obj.className += ' ' + sClass;
}

function removeClass(obj, sClass) { 
    var aClass = obj.className.split(' ');
    if (!obj.className) return;
    for (var i = 0; i < aClass.length; i++) {
        if (aClass[i] === sClass) {
            aClass.splice(i, 1);
            obj.className = aClass.join(' ');
            break;
        }
    }
}

function fnLoad()
{
    var iTime = new Date().getTime();
    var oW = id("welcome");
    var imgs = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg'];
    var bImgLoad = false;
    var bTime = false;

    bind(oW, "transitionend", end);
    bind(oW, "webkitTransitionEnd", end);
    var oTimer = setInterval(function(){
        if (new Date().getTime()-iTime>=5000) {
            bTime = true;
        }
        if (bImgLoad&&bTime) {
            clearInterval(oTimer);
            // 开始跳转，透明度为0后执行end函数
            oW.style.opacity = 0;
        }
    },1000);
    function end()
    {
        removeClass(oW, "pageShow");
    }

    preLoadImages(imgs).done(function(images){
        // alert(images.length);
        // alert(images[0].src+" "+images[0].width);
        bImgLoad = true;
    });
}

function preLoadImages(arr){   
    var newImages=[], loadedImages=0
    var postaction=function(){}  //此处增加了一个postaction函数
    var arr=(typeof arr!="object")? [arr] : arr
    function imageLoadPost(){
        loadedImages++
        if (loadedImages==arr.length){
            postaction(newImages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
        }
    }
    for (var i=0; i<arr.length; i++){
        newImages[i]=new Image()
        newImages[i].src=arr[i]
        newImages[i].onload=function(){
            imageLoadPost();
        }
        newImages[i].onerror=function(){
            imageLoadPost();
        }
    }
    return { //此处返回一个空白对象的done方法
        done:function(f){
            postaction=f || postaction
        }
    }
}

css代码：

@charset "utf-8"
/* CSS Document */
body{margin: 0; font-family: Arial, "微软雅黑"; color: #666; position: relative;}
.page{height: 100%; width:100%; position: absolute; left: 0; top: 0; overflow: hidden;background-color: #fff; z-index: 1; display: none;}
.pageShow{display: block;}
.page:nth-of-type(1){z-index: 10;}
.page:nth-of-type(2){z-index: 9;}
.page:nth-of-type(3){z-index: 8;}
.page:nth-of-type(4){z-index: 7;}
.page:nth-of-type(5){z-index: 6;}


/*欢迎页*/
@keyframes tree
{
    100%
    {
        transform: translateY(0px);
        opacity: 1;
    }
}
@-webkit-keyframes tree
{
    100%
    {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes logo
{
    100%
    {
        opacity: 1;
    }
}
@-webkit-keyframes shake
{
    0%
    {
        -webkit-transform:rotate(-50deg);
    }
    10%
    {
        -webkit-transform:rotate(45deg);
    }
    20%
    {
        -webkit-transform:rotate(-40deg);
    }
    30%
    {
        -webkit-transform:rotate(35deg);
    }
    40%
    {
        -webkit-transform:rotate(-30deg);
    }
    50%
    {
        -webkit-transform:rotate(25deg);
    }
    60%
    {
        -webkit-transform:rotate(-20deg);
    }
    70%
    {
        -webkit-transform:rotate(15deg);
    }
    80%
    {
        -webkit-transform:rotate(-10deg);
    }
    90%
    {
        -webkit-transform:rotate(5deg);
    }
    100%
    {
        -webkit-transform:rotate(0deg);
    }
}
@-webkit-keyframes cloud
{
    0%
    {
        /*动画不会引起页面元素重新渲染*/
        -webkit-transform:translateX(0px);
    }
    100%
    {
        -webkit-transform:translateX(-50px);
    }

}
.tree{ position: absolute;left: 0;top: 10%;width: 100%; transform: translateY(100px); -webkit-transform: translateY(100px);
opacity: 0; animation: 1s tree; -webkit-animation:1s tree; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards} 
#logo{ text-align: center; position: absolute;left: 0;width: 100%; bottom: 5%;
opacity: 0; animation: 0.5s 1s logo;animation-fill-mode:forwards;}
.welcome2{position: relative; padding-top: 50px; opacity: 0; transform: translateY(50px); animation: 1s 0.3s tree; animation-fill-mode:forwards;
-webkit-transform: translateY(50px); -webkit-animation: 1s 0.3s tree; -webkit-animation-fill-mode:forwards;}
.shake{position: absolute;left: 509px; top: 12px; width: 28px; height: 30px;background: url(../img/shake.png) no-repeat;
transform-origin: left bottom; animation: shake 0.5s 2s; 
-webkit-transform-origin: left bottom; -webkit-animation: shake 0.5s 2s;}
.tree3{ padding-top: 20px; opacity: 0; transform: translateY(30px); animation: 1s 0.6s tree; animation-fill-mode:forwards;
-webkit-transform: translateY(30px); -webkit-animation: 1s 0.6s tree; -webkit-animation-fill-mode:forwards;}
.cloud{ position: absolute; background: url(../img/cloud.png) no-repeat; background-size: contain;}
.cloud:nth-of-type(1){left: 432px;top: 15px; width: 58px; height: 44px;
animation: cloud 3s 2s infinite alternate linear;}
.cloud:nth-of-type(2){left: 79px;top: 77px; width: 91px; height: 70px;
animation: cloud 3s 2.5s infinite alternate linear;}
.cloud:nth-of-type(3){left: 402px;top: 142px; width: 54px; height: 41px;
animation: cloud 3s 2.8s infinite alternate linear;}
#welcome{transition: 1s;}