網頁搖晃特效代碼 CSS Shake抖動效果(適合愚人節)

2024-09-05 12:18:42

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>網頁搖晃特效代碼 CSS Shake抖動效果(適合愚人節)</title>  <meta name="Author" content="www.49028c.com">  <meta name="Keywords" content="www.49028c.com">  <meta name="Description" content="www.49028c.com">  <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body>www.49028c.com 網站武林網 恭祝大家愚人節快樂!!  <style>    .shake{display:inherit;transform-origin:center center;animation-name:shake;animation-duration:8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes shake{2%{transform:translate(-2px,10px) rotate(0.5deg)}4%{transform:translate(-8px,-1px) rotate(-2.5deg)}6%{transform:translate(0px,-2px) rotate(-2.5deg)}8%{transform:translate(-8px,-5px) rotate(2.5deg)}10%{transform:translate(-4px,-3px) rotate(1.5deg)}12%{transform:translate(-8px,10px) rotate(1.5deg)}14%{transform:translate(3px,10px) rotate(1.5deg)}16%{transform:translate(7px,9px) rotate(-1.5deg)}18%{transform:translate(-9px,2px) rotate(0.5deg)}20%{transform:translate(7px,5px) rotate(-1.5deg)}22%{transform:translate(-8px,4px) rotate(-2.5deg)}24%{transform:translate(-2px,9px) rotate(-0.5deg)}26%{transform:translate(-3px,-9px) rotate(-2.5deg)}28%{transform:translate(-1px,-6px) rotate(3.5deg)}30%{transform:translate(-2px,10px) rotate(0.5deg)}32%{transform:translate(7px,3px) rotate(-2.5deg)}34%{transform:translate(3px,-6px) rotate(-1.5deg)}36%{transform:translate(5px,-7px) rotate(1.5deg)}38%{transform:translate(8px,10px) rotate(3.5deg)}40%{transform:translate(-3px,-1px) rotate(2.5deg)}42%{transform:translate(-7px,8px) rotate(1.5deg)}44%{transform:translate(-6px,-2px) rotate(3.5deg)}46%{transform:translate(-4px,8px) rotate(3.5deg)}48%{transform:translate(-6px,-5px) rotate(1.5deg)}50%{transform:translate(10px,5px) rotate(-2.5deg)}52%{transform:translate(-2px,-9px) rotate(-2.5deg)}54%{transform:translate(5px,-7px) rotate(-1.5deg)}56%{transform:translate(10px,-6px) rotate(-0.5deg)}58%{transform:translate(-3px,8px) rotate(2.5deg)}60%{transform:translate(7px,-6px) rotate(2.5deg)}62%{transform:translate(-8px,6px) rotate(-2.5deg)}64%{transform:translate(10px,6px) rotate(-1.5deg)}66%{transform:translate(-2px,-1px) rotate(3.5deg)}68%{transform:translate(9px,5px) rotate(-1.5deg)}70%{transform:translate(-5px,6px) rotate(-0.5deg)}72%{transform:translate(-1px,9px) rotate(0.5deg)}74%{transform:translate(5px,0px) rotate(3.5deg)}76%{transform:translate(7px,-8px) rotate(-0.5deg)}78%{transform:translate(-3px,-5px) rotate(1.5deg)}80%{transform:translate(-2px,9px) rotate(1.5deg)}82%{transform:translate(7px,6px) rotate(3.5deg)}84%{transform:translate(8px,-2px) rotate(-1.5deg)}86%{transform:translate(-5px,-6px) rotate(1.5deg)}88%{transform:translate(9px,0px) rotate(-0.5deg)}90%{transform:translate(7px,3px) rotate(-0.5deg)}92%{transform:translate(-9px,-7px) rotate(-0.5deg)}94%{transform:translate(10px,10px) rotate(-1.5deg)}96%{transform:translate(-1px,6px) rotate(-2.5deg)}98%{transform:translate(-2px,1px) rotate(1.5deg)}0%,100%{transform:translate(0,0) rotate(0)}}.fool-day{display:none;position:fixed;z-index:9999999;background:rgba(0,0,0,.5);top:0;left:0;right:0;bottom:0}.fool-day img{position:fixed;display:block;top:50%;left:50%;transform:translate(-50%,-50%);margin: 0;}</style><div   id="dp5z5zr"   class="fool-day"><img src="http://xiazai.vevb.com/0401.png" alt="vevb網站武林網祝您愚人節快樂"></div><script type="text/javascript">    window.addEventListener('load', function () {        $(document.body).addClass('shake');        var clickRemoveShake = function () {            $(document.body).removeClass('shake');            $('.fool-day').fadeIn();            setTimeout(function () {               $('.fool-day').fadeOut();            }, 3000);            $(document).off('mousedown', clickRemoveShake);        };        $(document).on('mousedown', clickRemoveShake);    });</script> </body></html>

上一篇：CSS背景圖片自適應尺寸，全瀏覽器兼容

下一篇：CSS3實現動態404錯誤頁面特效效果