css3 grid布局实现loading动画效果
思路:
1、将body变成弹性布局(非必要)
2、设定div包裹着九个span盒子,div设定成网格布局,并将其旋转九十度
3、为span标签添加颜色与动画和动画延迟
知识点:
1、在css3中使用变量需要使用一个var()函数;然后将所需的变量写在var()中。
注意:使用变量不能少了–(两个减号)
格式:
元素{
属性:var(变量名);
}
.loading span{
/* var(--color)中color是变量名,必须要加-- */
background-color: var(--color);
}
.loading span:nth-child(2n+2){
/* n的初始值为0; */
--color:rgb(227, 243, 0);
}
<div class="loading">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
css
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: skyblue;
display: flex;
/* 将body标签转化为弹性容器 */
flex-flow: row wrap;
/* 水平居中显示 */
justify-content: center;
/* 垂直居中显示 */
align-items: center;
}
.loading {
width: 10em;
height: 10em;
/* 将loading转化为网格容器 */
display: grid;
/* 3列 */
grid-template-columns: repeat(3, 1fr);
/* 设置每个项目之间的行,列间距,如果列,行间距一样,可以简写为grid-gap:0.5em;*/
grid-gap: 0.5em 0.5em;
}
.loading span {
/* var(--color)中color是变量名,必须要加-- */
background-color: var(--color);
}
.loading span:nth-child(2n+2) {
/* n的初始值为0; */
--color: rgb(227, 243, 0);
}
.loading span:nth-child(4n+3) {
--color: rgb(49, 233, 187);
}
.loading span:nth-child(4n+1) {
--color: rgb(21, 92, 224);
}
.loading {
transform: rotate(45deg);
}
.loading span {
/* 动画播放时间后再添加时间表示动画延迟时间 */
animation: run 2s var(--delay) ease-in-out infinite;
/* 返回到第一帧 */
/* animation-fill-mode: backwards; */
}
.loading span:nth-child(7) {
--delay: 0s;
}
.loading span:nth-child(4n+4) {
--delay: 0.2s;
}
.loading span:nth-child(4n+1) {
--delay: 0.4s;
}
.loading span:nth-child(4n+2) {
--delay: 0.6s;
}
.loading span:nth-child(3) {
--delay: 0.8s;
}
@keyframes run {
0%,
20% {
/* scale缩放比例 */
transform: rotate(0) scale(0);
}
40%,
80% {
transform: rotate(360deg) scale(1);
}
100% {
transform: rotate(2turn) scale(0);
}
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果