1、新建一个html页面,命名为test.html,用于实现动态改变div的颜色。
2、在test.html页面,创建一个div元素,下面将对这个div元素背景颜色设置渐变的动画效果。
3、设置div的原始样式,定义div的宽度为100px,高度为100px,初始的背景颜色为红色。
4、使用css中的animation来进行背景颜色渐变的时间设置,这里设置为5秒,同时给动画定义一个名称myfirst。
5、使用@keyframes捆绑myfirst动画,同时利用from设置div开始的颜色,这里的开始颜色和初始颜色一样,都是红色。
6、在@keyframes捆绑myfirst的样式里,通过to来设置渐变后的最终颜色,这里设置最终颜色为黄色。
7、在浏览器运行test.html,查看实现的效果。