H5翻页动画原理实现

最新推荐文章于 2023-09-07 17:05:23 发布

Byte_Dance

最新推荐文章于 2023-09-07 17:05:23 发布

阅读量2.2k

点赞数

分类专栏： css JS

本文链接：https://blog.csdn.net/Byte_Dance/article/details/84921416

版权

JS 同时被 2 个专栏收录

72 篇文章 1 订阅

订阅专栏

css

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .divs1{
            
            animation:donghua1 1s alternate linear forwards;
        }
        .divs2{
            display: none;
            animation:donghua1 1s alternate linear forwards;
        }

        @keyframes donghua1{
            0%   {margin-top:0;}
            100%  {margin-top:300px;}
        }
    </style>
    <script src="jquery.lazyload.min.js"></script>
</head>
<body>
    <div style="width: 100%;height:100%;padding:300px;">
        <div style="width: 100px;height:100px;background:red;" class="divs1" id="ao"></div>
        <div style="width: 100px;height:100px;background:blue;" class="divs2" id="ab"></div>
    </div>


    <button style="position:absolute;top: 100px;" id="quehuan">切换</button>

    <script>
        var i = 0;
        document.getElementById("quehuan").onclick = function(){
            if(i%2 === 0){
                document.getElementById("ao").style.display="none"
                document.getElementById("ab").style.display="block"
            }else{

                document.getElementById("ao").style.display="block"
                document.getElementById("ab").style.display="none"
            }
            i++;
        }
    </script>
</body>
</html>

Byte_Dance

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
H5翻页动画原理实现

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .divs1{
复制链接

扫一扫