Question

我决定做一些在渐变背景上反复旋转的东西。我有“反复旋转”部分，但渐变背景不起作用。

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/

Answer 1

你的括号出现了一些错误，这里是工作小提琴：https://jsfiddle.net/ywtfsju1/1/

#css-gradient {在@keyframes rotate {，而不是在django.db.model.fields之后。

您应该使用代码缩进来避免此类错误

使用CSS添加渐变背景

1 个答案: