预习知识点.
动画帧
背景渐变
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: