学习记录第一天 CSS+js实现方块滑动

最新推荐文章于 2023-02-07 09:48:00 发布

三金得鑫

最新推荐文章于 2023-02-07 09:48:00 发布

阅读量289

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/wxdasasd/article/details/105585230

版权

在刷B站视频的时候发现了一个好玩的代码于是上手打了一个,并改动了一些，记录自己的学习过程。
通过css + js 实现方块的滑动效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/shape.css" media="all">
    <title>Document</title>
</head>
<body>
    <div class="container">
      

    </div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        for(var i=0; i < 180;i++){
            $('.container').append('<span></span>')
        }
       document

        $('span').mouseover(function(){
            $(this).addClass('fall')
        })
    })
</script>
</html>

body{
    margin: 0;
    padding: 0;
}

.container{
    width: 100vw;
    height: 100vh;
    background: url(../timg\ .jpg);
    background-size: cover;
    overflow: hidden;
}
.container span{
	display: inline-flex; /*将对象作为内联块级弹性伸缩盒显示*/
    width: 10%;
    height: 40px;
    background:#fff;
    border: 1px solid rgba(0,0, 0, 0);
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0,1);/*设置阴影*/
}

.container span.fall{
   background: rgba(8, 66, 189, 0.534);
    transition: 0.2s; /*过度时间为0.2s*/
    animation: fall 2s linear forwards;
   
}

@keyframes fall{
    0%{
        transform: translateY(0) rotate(0deg);
       
    }
    100%{
        transform: translateY(1000px) rotate(20deg);
       
    }

}

总体来说代码比较简单容易理解，运用CSS的动画效果完成。

三金得鑫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习记录第一天 CSS+js实现方块滑动

在刷B站视频的时候发现了一个好玩的代码于是上手打了一个，记录自己的学习过程。通过css + js 实现方块的滑动效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
复制链接

扫一扫