使用.animate()方法可以实现元素动画效果,它是一种非常有效的方法,可以让网页元素变得更加有趣。
它是一个JavaScript函数,可以接受一个参数,这个参数是一个对象,包含要改变的CSS属性和对应的目标值。
要使用.animate()方法,需要获取要改变的元素,可以使用document.querySelector()方法获取。就可以调用.animate()方法,并传入一个对象,包含要改变的CSS属性和对应的目标值。
let element = document.querySelector('.element'); element.animate({ left: '100px', opacity: 0.5 });
上面的代码将元素的left属性改变为100px,opacity属性改变为0.5。
.animate()方法还可以接受第二个参数,这个参数是一个对象,用来设置动画的速度、延迟、重复等属性。
let element = document.querySelector('.element'); element.animate({ left: '100px', opacity: 0.5 }, { duration: 500, delay: 100, iterations: 3 });
上面的代码将动画持续时间设置为500ms,延迟时间设置为100ms,重复次数设置为3次。
.animate()方法可以让网页元素变得更加有趣,它可以接受两个参数,一个是要改变的CSS属性和对应的目标值,另一个是设置动画的速度、延迟、重复等属性。