问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js、css实现ppt的出现效果

头像
ECEPA_禧戏
    55416111151

    图片描述

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

    javascriptcss
    阅读 5.6k
    6 个回答
    得票最新
    头像
    SAMPAN
      81941319

      可以看下 impress.js

      头像
      jayzou
        2.8k119

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

        头像
        松鼠闹IT
          191213

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

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

          头像
          chic
            1.1k93951
            头像
            Lemures
              1.7k125

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

              头像
              梦禅
                3.2k111

                说一种与楼上不同的动画方法吧，略有些复杂……和原生实现轮播图本质一样，以变换一个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>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题