react页面时间轴实现_完成响应时间轴投资组合页面

react页面时间轴实现

从上一教程继续 ，让我们为我们的构建增光添彩。

正在加载图标

我们将深入研究CSS3动画，并为我们的加载图标创建一个简单的旋转动画。 我们已经在页面上有了所需的标记，因此让我们直接进入CSS。

div.loading {
    color: darken($grey, 20%);
    position: absolute;
    width: 100px;
    bottom: 15px;
    left: 50%;
    margin-left: -50px;

    img {
        vertical-align: middle;

        &.rotate {
            -webkit-animation-name: rotate;
            -ms-animation-name: rotate;
            animation-name: rotate;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -ms-animation-timing-function: linear;
            animation-timing-function: linear;
        }


    }
}

将此代码放在Sass文件中的Portfolio portfolio-item块之后。 首先，我们在这里为加载div本身设置一些样式。 我们绝对定位它，并通过使用margin-left来确保它居中   -50px，即元素宽度的一半。 这是为了弥补CSS从左上角定位元素的事实。

下一节将更加有趣。 正如您可能在HTML中看到的那样，我们为加载的<img>标签分配了一个rotate类，该标签将用作执行CSS动画的钩子。 这里的样式是我们动画的设置。

我们基本上是在告诉CSS我们的动画功能是什么（我们将在稍后创建）࿰