HTML5 鼠標動畫效果代碼
HTML5 中可以通過 CSS 和 JavaScript 來實現(xiàn)鼠標動畫效果，以下是示例代碼。
CSS 代碼：
pre {
background-color: #333;
color: white;
padding: 10px;
font-size: 16px;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .3s ease-out;
}
.box:hover {
background-color: #0f0;
transform: translate(-50%, -50%) scale(1.2);
}
JavaScript 代碼：
var box = document.querySelector('.box');
box.addEventListener('mouseenter', function(e) {
box.style.backgroundColor = '#0f0';
box.style.transform = 'translate(-50%, -50%) scale(1.2)';
});
box.addEventListener('mouseleave', function(e) {
box.style.backgroundColor = '#f00';
box.style.transform = 'translate(-50%, -50%)';
});以上代碼實現(xiàn)了鼠標移入時，盒子的背景顏色變?yōu)榫G色，同時放大 1.2 倍；鼠標移出時，盒子的背景顏色恢復紅色，同時恢復原始大小。通過 CSS 的 transition 屬性或 JavaScript 的事件監(jiān)聽，可以實現(xiàn)更多動畫效果。