图片或者元素模块碎片化降落

CSS Grid 动画效果实现

最新推荐文章于 2024-12-18 22:15:05 发布

sjy7329

最新推荐文章于 2024-12-18 22:15:05 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/sunjynyue/article/details/83823715

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用 CSS Grid 和 JavaScript 实现的动态网格动画效果，通过创建多个子 div 并应用过渡动画，实现了网格元素的上下移动。文章详细讲解了 HTML 结构、CSS 样式设置以及 JavaScript 代码逻辑，展示了如何利用 CSS Grid 的灵活性和 JavaScript 的动态控制来增强网页视觉体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:250px;
            height:250px;
            position:absolute;
            top:0;
            left:50%;
            margin-top:0px;
            margin-left:-125px;
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
<script>
    window.onload=function(){
        var bWidth=box.offsetWidth;
        var bHeight=box.offsetHeight;
        for(var i=0;i<20;i++){
            for(var j=0;j<20;j++){
                var oDiv=document.createElement('div');
                oDiv.style.width=bWidth/20+'px';
                oDiv.style.height=bHeight/20+'px';
                oDiv.style.position="absolute";
                oDiv.style.top=(bHeight/20)*i+'px';
                oDiv.style.left=(bWidth/20)*j+'px';
                oDiv.style.background='#ccc';
                oDiv.style.transition=(Math.random()*0.2+0.3)+'s all ease';
                box.appendChild(oDiv);

            }
        }
        var index=box.children.length-1;
        var timer=null;
        window.onclick=function(){
            if(index==box.children.length-1){
                clearInterval(timer);
                timer=setInterval(function(){
                    box.children[index].style.top=box.children[index].offsetTop+400+'px';
                    index--;
                    if(index==-1){
                        clearInterval(timer);
                        index=0;
                        return;
                    }
                },10)
            }else{
                clearInterval(timer);
                timer=setInterval(function(){
                    box.children[index].style.top=box.children[index].offsetTop-400+'px';
                    index++;
                    if(index==box.children.length){
                        clearInterval(timer);
                        index=box.children.length;
                        return;
                    }
                },10)
            }
        }
    }
</script>
</html>