首页写一个复杂的有地鼠图案，有背景图，而且界面居中的html打地鼠代码，用opacity 属性来控制地鼠图案的显示状态

写一个复杂的有地鼠图案，有背景图，而且界面居中的html打地鼠代码，用opacity 属性来控制地鼠图案的显示状态

时间: 2024-03-17 15:44:37 浏览: 101

好的，以下是一个简单的例子，用 opacity 属性来控制地鼠图案的显示状态： ```html <!DOCTYPE html> <html> <head> <title>打地鼠游戏</title> <style> body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; margin: 0; padding: 0; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .mole { background-image: url("mole.png"); background-size: contain; width: 100px; height: 100px; opacity: 0; transition: opacity 0.5s ease-in-out; } .show { opacity: 1; } </style> </head> <body> <div class="container"> <div class="mole"></div> </div> <script> const mole = document.querySelector(".mole"); setInterval(() => { mole.classList.toggle("show"); }, 1000); </script> </body> </html> ``` 在这个例子中，我们使用了一个 `.container` 元素来居中地鼠图案。`.mole` 元素是我们的地鼠图案，初始时设置了 opacity 为 0，表示不可见。我们还定义了一个 `.show` 类，当该类被添加到 `.mole` 元素上时，地鼠图案就会变得可见。在 JavaScript 中，我们使用 `setInterval` 函数来定期切换 `.show` 类，从而让地鼠图案周期性地出现和消失。

阅读全文