css中图怎么做动图 |css3媒体查询demo

/* 创建动画 */
@keyframes example {
0% {left: 0;}
50% {left: 50%;}
100% {left: 0;}
}
/* 应用动画 */
div {
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

在上面的代码中，大家创建了一个名为“示例”的动画，该动画从左到右移动元素，然后回到左侧。然后，大家将该动画应用于包含div元素的CSS选择器中。大家还指定了动画的持续时间和重复次数。

/* 创建动画 */
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
/* 应用动画 */
div {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

在这个例子中，大家创建了一个名为“spin”的动画，该动画旋转元素360度。然后，大家将该动画应用于包含div元素的CSS选择器中。大家还指定了动画的持续时间、重复次数和计时函数。

总之，在CSS中创建动画有很多方法。不同的动画需要不同的技术，因此你需要根据你想要的效果选择最适合的方法。