js、css实现ppt的出现效果

由下向上的显示效果，难点在于由下向上和先显示三角（也要由下向上，不能一下子出现）

这个可以看做一个div高度变化产生的动画效果，可以用css3的transition来制作。只要高度的初始值和最终值即可。如何触发这个变化可以用js来控制。当然了，如果上边框如果要实现这样的效果，可能稍微有点复杂了，切一下图是一种解决方式。

CSS 绝对定位 bottom:0
JS 改变 height
下面的图片是我用谷歌的调试工具在当前页面中加的CSS样式

当然，如果不需要考虑低版本浏览器，用CSS3的 transition 来过渡一下也可以

手机，没办法写事例代码，说说思路吧。
overflow：hidden，然后js移动div元素。
其实不需要js也可以实现这样的效果，用css动画吧。

可以看下 impress.js

思路楼上已经说了，我补充个css3兼容性渐变生成器吧 http://www.colorzilla.com/gradient-editor/

说一种与楼上不同的动画方法吧，略有些复杂……和原生实现轮播图本质一样，以变换一个div的高度为例

<body>
    <div style="width:200px;height:200px;background:green;margin:50px auto;" id="test"></div>

    <script>
    window.onload = function () {
        var test = document.getElementById('test');
        var height1 = 600; // 希望最终的高度
        var offset = height1 - parseInt(test.style.height);

        stretch(offset);

        function stretch(offset) {
            var time = 3000; // 变换总时间
            var inter = 10; // 隔10ms变换一次
            var speed = offset/(time/inter); // 每次边换移动的距离
            var h = parseInt(test.style.height) + offset;

            var go = function () {
                var height = parseInt(test.style.height);
                if ((speed >0 && height < h) || (speed < 0 && height >h)) {
                    test.style.height = height + speed + 'px';
                    setTimeout(go, inter);
                }
                else {
                    test.style.height = h + 'px';
                }
            };
            go();
        };
    }


    </script>
</body>

【热门文章】