css添加渐变动画效果 |ie11 css video

css世界书籍，webpack 开发模式 css，css如何禁用点击效果，css jq线条边框旋转，css3Drender使用文档，浏览器 css 获取标签，ie11 css video css添加渐变动画效果 |ie11 css video

.myDiv {
background: linear-gradient(to right, #FFB88C, #DE6262);
background-size: 200% 100%;
animation: gradient-bg 2s ease-in-out infinite;
}
@keyframes gradient-bg {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

从上面的代码中可以看出，先在 CSS 中设置了背景渐变，然后使用关键帧动画来实现渐变背景动画效果。其中，background-size 设置了背景的尺寸，animation 设置了动画的名称和时间周期，keyframes 中通过百分比设置了背景图片的位置，从而实现了渐变背景的效果。

除了上面的渐变背景动画效果，CSS 中还有很多其它的动画效果，比如旋转、缩放、延迟等等。通过组合各种动画效果，能够实现更加丰富多彩的网页设计效果。