Home >Web Front-end >CSS Tutorial >Share the example code of 3 Loading designs in CSS3 (1)
Share the example code of 3 Loading designs in CSS3 (1)
- 零下一度Original
- 2017-05-05 15:21:201827browse
Recently I am studying the <a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a> series of courses, which cover a lot of content. Although the content is very simple and easy to understand, it is very difficult to remember, such as CSS3 Some properties of . The CSS3 Loading Animation I will introduce today is also the content introduced in Geek Academy. Interested students can also go and watch the video.
Loading one
HTML code. For convenience, I only paste the core code here
<p class="box">
<p class="loading">
<i></i>
</p>
</p>
pWe use below i tag, don’t ask why, you can also change it to p tag or any other tag. Let’s use CSS to modify our Html
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 100%;
padding: 3%;
}
.loading {
display: flex;
width: 30%;
height: 250px;
margin: 50px auto;
border: 1px solid #699;
justify-content: center;
align-items: center;
}Here is an explanation, margin: 50px auto; In this line, add up and downThe outer margins are set to 50px, and the left and right margins are set to auto, so that our elements can be horizontally centered.
box-sizing: border-box here mean? We set the width to 30% of the parent element, and we set a border. Does the size occupied by this border count in the width of the current element? The value we set here is the description. Plus the size occupied by the border, the current element occupies 30% of the parent element.
display,align-items,justify-content These three attributes are to place the content in the i tag in the middle of p . First use the display attribute to set p to a flexible box element, then use align-items to set the element to be centered on the vertical axis, justify-content Set the element to be centered on the horizontal axis. Note that the centering effect must be effective when these three elements exist at the same time, because the latter two attributes are dependent on the first attribute.
.loading i {
width: 35px;
height: 35px;
position: relative;
display: block;
border-radius: 50%;
background: linear-gradient(transparent 0%, transparent 50%,
#699 50%, #699 100%);
-webkit-animation: loading 1s linear 0s infinite;
}Look at the background attribute, which sets a linear gradient effect. The parameters are also new to me and I can’t understand. I don’t understand why it is written like this. In fact, it can be understood this way. From 0% to 70% are set to transparent, from 70% to 100% are set to #699, In this way we see the image in the above Picture.
-webkit-animation The attribute specifies an animation for the current element. The first parameter is the name of the animation, which is loading. This animation requires us to You have to define it yourself. The specific definition will be introduced below. The second parameter is the duration of the animation, the third parameter is the speed curve of the animation, the fourth parameter is the animation delay time, and the fifth parameter is the number of times the animation plays. Let’s take a look at our own defined animation
@-webkit-keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}It is very easy to understand, which is to rotate elements at different stages of animation. It is worth noting that this definition method can only see the animation effect in the Chrome and Safari browsers, so if we want to also display the animation effect in the Firefox browser, Then we need to define it this way.
@-moz-keyframes loading-moz{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
When quoting -moz-animation: loading-moz 1s linear 0s infinite; is almost the same, just changing the head (as for other How to define it in the browser, try it yourself).
##demo02.gif
The effect of this animation is that the five stripes swing like waves. Let’s write such an effect below. The first is
HTML, no suspense, very simple layout<pre class="brush:css;toolbar:false;"><p class="box">
<p class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p></pre>In fact, almost all the
codes for this effect are consistent with the above, let’s take a look<pre class="brush:css;toolbar:false;">* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 100%;
padding: 3%;
}
.loading {
display: flex;
width: 30%;
height: 250px;
margin: 50px auto;
border: 1px solid #699;
justify-content: center;
align-items: center;
}
.loading i {
position: relative;
width: 6px;
height: 32px;
margin-right: 6px;
border-radius: 3px;
background-color: #699;
}</pre>The only extra line of code here is the
attribute in .loader i. Why is there such an extra line? Because we have 5 i tags, if there is no attribute setting in this line, all the tags will overlap. The next step is to set the animation effect.<pre class="brush:css;toolbar:false;">@-webkit-keyframes loading {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
100% {
transform: scaleY(1);
}
}
.loading i:first-child {
-webkit-animation: loading 1s linear .1s infinite;
}
.loading i:nth-child(2) {
-webkit-animation: loading 1s linear .2s infinite;
}
.loading i:nth-child(3) {
-webkit-animation: loading 1s linear .3s infinite;
}
.loading i:nth-child(4) {
-webkit-animation: loading 1s linear .4s infinite;
}
.loading i:last-child {
-webkit-animation: loading 1s linear .5s infinite;
}</pre><p>可见我们设置的动画效果就是在 <code>50% 的时候，将元素沿着 Y 轴进行缩放。然后我们对每一个i 标签进行了动画设定，不同的是每一个标签中的动画延迟执行时间不同，这样就可以达到波浪的效果，还有一点值得注意的是，我们发现我们指定的 动画速度曲线不同了，其实这个地方我们有必要了解一下所有可能的取值，如下
linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。
Loading Three
demo03.gif
这次要做的效果是动态转圈加载的效果，下面来看看如何实现这里的 HTML 代码和以上两个可能有点差别，这里多了一个 p 标签，目的是让画出的图形能够居中。
<p class="box">
<p class="loader">
<p class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
</p>看看 CSS 代码
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 250px;
margin: 10px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
position: relative;
}
.loading i {
display: block;
width: 15px;
height: 15px;
background-color: #333333;
border-radius: 50%;
position: absolute;
}要理解为什么这些代码会画出如图所示的图形，那么我们必须要对 position 属性有一个透彻的了解，首先我们来看看我们用到的两个属性值是什么意思.
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
知道了意思，再来分析以上的代码，我们在loading 元素中定义了一个 position:relative 由于没有相应的内容将其撑起，所以这个时候loading 实际上为中心的一个点，然后我们将 i 标签设置为绝对定位，也就是围绕着这个点进行画圆即可。下面来看看画圆的代码
.loading i:nth-child(1) {
top: 25px;
left: 0px;
}
.loading i:nth-child(2) {
top: 17px;
left: 17px;
}
.loading i:nth-child(3) {
top: 0px;
left: 25px;
}
.loading i:nth-child(4) {
top: -17px;
left: 17px;
}
.loading i:nth-child(5) {
top: -25px;
left: 0px;
}
.loading i:nth-child(6) {
top: -17px;
left: -17px;
}
.loading i:nth-child(7) {
top: 0px;
left: -25px;
}
.loading i:nth-child(8) {
top: 17px;
left: -17px;
}看到这些代码，如果你不知道为什么这样能够画出一个圆，那么拿出草稿纸，画一个坐标轴，将上述代码中的 top 值作为 y 轴的值，将 left 的值作为 x 轴的值，就可以看到为什么这么书写代码了。好了，静态图像已经书写完毕，那么接下来就是定义动画的时间了
@-webkit-keyframes loading {
50%{
transform: scale(0.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}opacity 属性用于设置元素的透明度。所以说我们的动画效果就是将元素缩小为 0.4 倍并且将透明度设置成 0.3。然后为每个 i 标签指定动画效果，从上到下依次为
-webkit-animation: loading 1s ease 0s infinite; -webkit-animation: loading 1s ease 0.12s infinite; -webkit-animation: loading 1s ease 0.24s infinite; -webkit-animation: loading 1s ease 0.36s infinite; -webkit-animation: loading 1s ease 0.48s infinite; -webkit-animation: loading 1s ease 0.60s infinite; -webkit-animation: loading 1s ease 0.72s infinite; -webkit-animation: loading 1s ease 0.84s infinite;
这个时候如果运行，你会发现好像是逆时针旋转的，如果想改成顺时针旋转，可以将延迟时间前面都加上负号。好了，今天先介绍这三种加载效果，如果书写有错误，欢迎反馈交流。
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
The above is the detailed content of Share the example code of 3 Loading designs in CSS3 (1). For more information, please follow other related articles on the PHP Chinese website!