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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具