在颤动中连续改变背景,可以通过使用CSS动画和JavaScript来实现。下面是一个基本的实现步骤:
以下是一个示例代码:
HTML:
<div id="background"></div>
CSS:
#background {
width: 100%;
height: 100vh;
background-image: url('your-background-image.jpg');
animation: shake 1s infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
JavaScript:
var background = document.getElementById('background');
background.addEventListener('mousemove', function() {
background.classList.add('shake');
});
background.addEventListener('mouseout', function() {
background.classList.remove('shake');
});
这个示例代码中,当鼠标在背景元素上移动时,会触发shake类的添加,从而启动颤动动画。当鼠标移出背景元素时,shake类会被移除,动画停止。
这种方法可以应用于各种场景,例如网页背景、登录页面、幻灯片等,通过改变CSS动画的关键帧和持续时间,可以实现不同的颤动效果。
领取专属 10元无门槛券
手把手带您无忧上云