css3 --- 翻页动画 --- javascript --- 3d --- 准备

时间：2014-06-05 15:57:14 阅读：343 评论：0 收藏：0 [点我收藏+]

用css3和javascript做一个翻页动画<知识准备部分>

如有更多疑问请参照：http://www.imooc.com/learn/77

bubuko.com,布布扣

这是用css3的-webkit-transition属性做的渐变颜色动画，下面是三张截图：

bubuko.com,布布扣

怎么样？好看吧，下面是它的代码：

-webkit-transition: background-color 2s;

-webkit-是用chrome或safari打开的一个前缀，
transition时表示渐变的属性，它的值是 渐变属性 和 渐变时间，
上面注释的部分只是把渐变属性和渐变时间分开写而已了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css transition</title>
    <style>
        #block {
            width: 400px;
            height: 300px;
            background-color: deepskyblue;
            margin: 0 auto;

            /*-webkit-transition-property: background-color;*/
            /*-webkit-transition-duration: 2s;*/
            -webkit-transition: background-color 2s;
        }
        #block:hover {
            background-color: lawngreen;
        }
    </style>
</head>
<body>
<div id="block"></div>
</body>
</html>

bubuko.com,布布扣

其实，表示渐变的transition后可以有第三个部分属性值，它表示渐变过程

bubuko.com,布布扣

上面的颜色是番茄的颜色，其实也就是西红柿了

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transition timing</title>
    <style>
        #wraper {
            width:1024px;
            margin: 0 auto;
        }

        .progress-bar {
            width: 40px;
            height:40px;
            background-color: tomato;
        }
        .progress-bar:hover {
            width: 960px;
        }

        #linear {
            -webkit-transition: width 15s linear;
        }
        #ease {
            -webkit-transition: width 15s ease;
        }
        #ease-in {
            -webkit-transition: width 15s ease-in;
        }
        #ease-out {
            -webkit-transition: width 15s ease-out;
        }
        #ease-in-out {
            -webkit-transition: width 15s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="wraper">
        <p>linear</p>
        <div class="progress-bar" id="linear"></div>

        <p>ease</p>
        <div class="progress-bar" id="ease"></div>

        <p>ease-in</p>
        <div class="progress-bar" id="ease-in"></div>

        <p>ease-out</p>
        <div class="progress-bar" id="ease-out"></div>

        <p>ease-in-out</p>
        <div class="progress-bar" id="ease-in-out"></div>
    </div>
</body>
</html>