css js div 左滑,右滑,上滑,下滑
推荐一个非常nice的css 动画,效果多样,好看
https://www.webhek.com/post/css3-animation-sniplet-collection.html#/
<!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"> <title>Document</title> </head> <body style="height:200px"> <div style="height:400px;overflow: hidden;"> <div id="goBottom" style="width: 250px;height: 150px;line-height:150px;text-align: center;color:white;border-radius: 25px; background-color: #778dee;transition: all 1s; opacity: 0.1;"> 向下运动 </div> </div> <div style="height:400px;overflow: hidden;"> <div id="goTop" style="width: 250px;height: 150px;line-height:150px;text-align: center;color:white;border-radius: 25px;margin-top: 250px;background-color: #778dee;transition: all 1s; opacity: 0.1;"> 向上运动 </div> </div> <div style="height:150px;overflow: hidden;"> <div id="goLeft" style="float:left;width: 250px;height: 150px;line-height:150px;margin-left: 250px;text-align: center;color:white;border-radius: 25px;background-color: #778dee;transition: all 1s; opacity: 0.1;"> 向左运动 </div> <div id="goRight" style="float:right;width: 250px;height: 150px;line-height:150px;margin-right: 250px;text-align: center;color:white;border-radius: 25px;background-color: #778dee;transition: all 1s; opacity: 0.1;"> 向右运动 </div> </div> </body> </html> <script> window.onload = function () { // 向下滑 document.getElementById("goBottom").className = "goBottom"; document.getElementById("goTop").className = "gotop"; document.getElementById("goLeft").className = "goLeft"; document.getElementById("goRight").className = "goRight"; } </script> <style> .goBottom { opacity: 1 !important; margin-top: 200px; transition: "all 5s" } .gotop { opacity: 1 !important; margin-top: 0px !important; transition: "all 5s" } .goLeft { opacity: 1 !important; margin-left: 0px !important; transition: "all 5s" } .goRight { opacity: 1 !important; margin-right: 0px !important; transition: "all 5s" } </style>