通过扫两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>
*{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);}}
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\');}});};
爱站程序员基地
