首页提供一个炫酷的被劫持html代码

提供一个炫酷的被劫持html代码

时间: 2024-11-04 22:14:45 浏览: 13

创建一个炫酷的HTML代码示例，我们通常会使用CSS动画和一些交互元素。下面是一个简单的例子，展示了一个被“劫持”的红色方块，当鼠标悬停时，它会旋转并改变背景颜色： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .box { width: 100px; height: 100px; background-color: red; position: relative; transition: transform 0.5s ease, background-color 0.5s; } .box:hover { transform: rotate(360deg); background-color: blue; } </style> </head> <body> <div class="box" id="hijackedBox"></div> <script> document.getElementById('hijackedBox').addEventListener('mouseover', function() { this.style.backgroundColor = 'yellow'; }); document.getElementById('hijackedBox').addEventListener('mouseout', function() { this.style.backgroundColor = 'red'; }); </script> </body> </html> ``` 这个代码中，当你将鼠标悬停在id为"hijackedBox"的红色方块上时，它会立即变为黄色，并开始连续旋转。当鼠标离开时，颜色又变回红色。

阅读全文