<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Quick modal animation test</title> <META NAME="COPYRIGHT"CONTENT="http://codepen.io/TiagoLopes/pen/ENxdJL"> <style type="text/css"> body{ background: #333; font-family: 'Palatino' } button{ background: transparent; border: 1px solid black; padding: 10px 15px; text-transform: uppercase; margin-top: 20px; } .trigger{ background: #fff; padding: 10px; margin: 20px; display: inline-block; cursor: pointer; } .modal{ perspective: 800px; width: 100%; height: 90%; position: fixed; top: 10%; } .modal .content{ position: absolute; top: 50%; left: 50%; transform: translateY(0%) translateX(-50%) rotateX(-25deg); background: #fff; width: 450px; padding: 50px; box-sizing: border-box; border-radius: 2px; text-align: center; opacity: 0; transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .modal.animate .content{ transform: translateY(-50%) translateX(-50%) rotateX(0deg); opacity: 1; } .modal .content *{ opacity: 0; transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1); } .modal.animate .content *{ opacity: 1; transition-delay: .5s; } .modal.animate .content button{ transition-delay: .8s; } </style> </head> <body> <span class="trigger">animate toggle</span> <div class="modal"> <div class="content"> <h1>Modal Title</h1> <p>Hello. This is a modal animation. </p> <button class="trigger">Ok, close me</button> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('.modal').addClass('animate'); }); $(".trigger").click(function(){ $(".modal").toggleClass("animate"); }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 动画弹窗 喜欢 (0)or分享 (0)
