css animation 制作打开动画效果
思路如下:
aimation 设置执行动画和 时间 以及是否循环
@keyframes 定义动画
接着 默认动画的div隐藏
点击执行事件 display block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" /> <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js" ></script> <script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript"></script> </head> <body> <style type="text/css"> .layui-container{width: 40%;height: 400px;background-color: red;display: none;transform:translateY(100px); animation: luandong .5s; } @keyframes luandong{ 0%{transform:translateY(-300px);} 50%{transform:translateY(-100px);} 100%{transform:translateY(100px);} } </style> <button class="layui-btn layui-btn-danger a">按钮</button> <button class="layui-btn layui-btn-disabled">按钮2</button> <div class="layui-container b"> wqeqwe </div> <script type="text/javascript"> $(".a").click(function () { $(".b").css("display","block") $("body").css("background","#c3c3c3") }) $(function function_name(argument) { // $(".a").click() }) </script> </body> </html>