我决定在渐变背景上重复旋转一些东西。我已经有了“旋转反复”的部分,但渐变背景不起作用。使用CSS添加渐变背景
HTML:
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<div id="css-gradient"></div>
CSS:
img {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-play-state: running;
float: left
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
#css-gradient {
background: linear-gradient(blue, white)
height: 100px;
width: 100px;
}
}
我还张贴作为一个小提琴,所以你可以看到它在行动:
https://jsfiddle.net/ywtfsju1/
大家好,欢迎堆栈溢出!通常情况下,您希望在帖子中发布代码(尽管为了方便起见添加小提琴也很好)。您不需要重复按空格,您可以选择代码并在编辑器中按下“{}”图标,或者按Ctrl-K,它将格式化为您的代码块。在这篇文章中,我已经为你做了这件事,但如果你格式化原文,将来会更简单。 –