爱站程序员基地在刷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的动画效果完成。
