Js 、html 、css 实现动画页面飘窗功能（可暂停、关闭）

小小菜鸡留言：一个非常常见的功能，网上也都有，但是还是写一下，自己也做个备份。哈哈哈 @auth： Milo

1. css:

       .popup {  
            position: absolute;  
            width: 200px; /* 根据图片大小调整 */  
            height: 200px; /* 根据图片大小调整 */  
            animation: moveBackAndForth 60s infinite linear;  /* 60s代表动画可移动速度 */
            z-index: 999; /* 保证动画飘窗在最上方不被其他元素遮挡 */
        }  
        
        .popup img {  
            width: 100%;  
            height: auto;  
        }  
        
        #closeButton {  
            position: absolute;  
            top: 10px; /* 调整位置以适应右上角 */  
            right: 10px; /* 调整位置以适应右上角 */  
            cursor: pointer;  
            z-index: 1; /* 确保按钮在图片之上 */  
        }  
        
        @keyframes moveBackAndForth {  
            0% {  
                left: 0;  
                top: 0;  
                transform: translateX(0) translateY(0);  
            }  
            50% {  
                left: calc(100% - 200px); /* 图片宽度 */  
                top: calc(100% - 200px); /* 图片高度 */  
                transform: translateX(0) translateY(0);  
            }  
            100% {  
                left: 0;  
                top: 0;  
                transform: translateX(0) translateY(0);  
            }  
        }

2. html

   <div id="birthdayPopup" class="popup">  
        <img src="您的图片路径" alt="生日图片">  
        <button id="closeButton">关闭</button>  
   </div>  

3. JavaScript

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {  
            const popup = document.getElementById('birthdayPopup');  
            const closeButton = document.getElementById('closeButton');  
       
            //  初始状态：后端传来数据，控制初始化是否显示,可用接口请求
            var is_brithday = '{$is_brithday}';
            if(is_brithday === 'none') {
               popup.style.animationPlayState = 'paused'; // 初始化不需要飘窗动画停止 
            }
            popup.style.display = is_brithday;
        
            // 添加鼠标悬停事件监听器到飘窗  
            popup.addEventListener('mouseenter', function() {  
                popup.style.animationPlayState = 'paused'; // 暂停动画  
            });  
        
            popup.addEventListener('mouseleave', function() {  
                popup.style.animationPlayState = 'running'; // 恢复动画  
            });  
        
            closeButton.addEventListener('click', function() {  
                popup.style.display = 'none';  
                popup.style.animationPlayState = 'paused'; // 隐藏飘窗时暂停动画  
            });  
        });
    </script>

以上就是这些，不足之处，还望指正，谢谢。大家一起进步加油！