html中var函数,CSS3通过var()和calc()函数实现动画特效

预习知识点.

动画帧

背景渐变

var() 和 calc() 的使用

flex布局的场景

Start:

创建HTML结构:

因为我们要转圈圈， 所以需要20个小盒子来组成我们的圈盒子，里面加上 style 样式: --i :num 这样我们获取到后面的数值.

盒子居中:

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

section{

display:flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: -webkit-linear-gradient(left top, pink, orange);

}

使用 flex 布局， 讲盒子定位到正中央的位置，

background: -webkit-linear-gradient(left top, pink, orange);

这个是渐变背景.

设置 loading 盒子大小.

.loading{

position: relative;

width: 250px;

height: