在促销海报刚弹出时会抖动一两下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>金币促销活动</title> <style> body { margin: 0; padding: 0; overflow: hidden; } #promo-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 10px; z-index: 999; } #promo-popup img { width: 100%; height: auto; border-radius: 5px; } #close-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; } /* 初始状态不抖动,点击关闭按钮后再添加抖动效果 */ @keyframes shake { 0%, 100% { transform: translate(-50%, -50%); } 10%, 30%, 50%, 70%, 90% { transform: translate(-50%, -50%) rotate(-5deg); } 20%, 40%, 60%, 80% { transform: translate(-50%, -50%) rotate(5deg); } } /* 添加抖动效果的class */ .shake { animation: shake 0.5s ease; } </style> </head> <body> <div id="promo-popup"> <div id="close-btn" onclick="closePromoPopup()">X</div> <img src="path/to/promo-image.jpg" alt="促销活动图片"> </div> <script> document.addEventListener("DOMContentLoaded", function () { // 显示促销活动弹窗,并在一定时间后添加抖动效果 setTimeout(function () { var promoPopup = document.getElementById("promo-popup"); promoPopup.style.display = "block"; promoPopup.classList.add("shake"); }, 3000); // 3秒后显示,你可以根据需要调整时间 // 关闭促销活动弹窗 window.closePromoPopup = function () { var promoPopup = document.getElementById("promo-popup"); promoPopup.style.display = "none"; promoPopup.classList.remove("shake"); // 移除抖动效果 }; }); </script> </body> </html>
标签:动画,海报,促销,promoPopup,抖动,50%,10px,按钮,shake From: https://www.cnblogs.com/shamo89/p/18001441