css3的animation实现滑块掉落效果

最新推荐文章于 2023-05-15 20:33:41 发布

、昔年

最新推荐文章于 2023-05-15 20:33:41 发布

阅读量1.3k

点赞数

文章标签： css js html css3

本文链接：https://blog.csdn.net/weixin_43760969/article/details/106112092

版权

通过扫两html+css+js代码实现滑块掉落的效果，主要用的是css3的animation属性

废话不多说，先上效果图
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/index.js"></script>
</head>
<body>
    <!-- 主界面创建一个容器就即可，利用js动态创建滑块 -->
    <div class="container"></div>
</body>
</html>

css代码

*{
    padding: 0;
    margin: 0;
}
body{
    overflow: hidden;
}
.container{
    width: 100%;
    height: 100vh;
    background: url('../img/bg.jpg') no-repeat center center ;
}
.container span{
    display: inline-block;
    width: 10%;
    height: 41px;
    background: white;
    border: 1px solid rgba(0, 0, 0);
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,1);
}
.container span.fall{
    z-index: 1000;
    background: #f00;
    transition: 0.2s;
    pointer-events: none;
    animation: fall 2s linear forwards;
}
@keyframes fall{
    0%{
        transform: translateY(0) rotate(0deg);
    }
    100%{
        transform: translateY(1000px) rotate(90deg);
    }
}

js代码

window.onload=function(){
    //获取容器
    const div=document.getElementsByClassName('container')[0];
    //创建滑块并添加到容器里面
    //注意，这里不一定是160个span，需要自己进行实际修改
    for(let i=0;i<160;i++){  
        let span=document.createElement('span');
      div.appendChild(span);
    }
    //获取所有的span标签
    const spans=document.getElementsByTagName('span');
    //将伪数组转换为数组
    const list=Array.from(spans);   
    //遍历每一个span标签，添加点击事件，点击即添加fall类
    list.forEach(element => {
        element.onmouseup=function(){
            element.setAttribute('class','fall');
        }
    });
};

、昔年

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3的animation实现滑块掉落效果

通过扫两html+css+js代码实现滑块掉落的效果，主要用的是css3的animation属性废话不多说，先上效果图html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫