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我们的动画功能是什么(我们将在稍后创建)