html定义动画,「HTML+CSS」--自定义加载动画【016】

效果展示

Demo代码

HTMLhtml>

Document

CSShtml,body{

margin: 0;

height: 100%;

}

body{

display: flex;

justify-content: center;

align-items: center;

background: #263238;

}

section {

width: 650px;

height: 300px;

padding: 10px;

position: relative;

display: flex;

align-items: center;

justify-content: center;

/* 红色边框仅作提示 */

border: 2px solid red;

}

span{

width : 96px;

height: 96px;

border: 10px solid white;

border-style: solid  solid dotted dotted ;

border-radius: 50%;

position: relative;

display: flex;

align-items: center;

justify-content: center;

animation: rotation 2s linear infinite;

}

span::before{

position: relative;

content: '';

width:  48px;

height:  48px;

border: 10px  red solid;

border-style: solid  solid  dotted ;

border-radius: 50%;

/* 注意这里的时间 */

animation: rotationback 1s linear infinite;

}

@keyframes rotation {

0% { transform: rotate(0deg) }

100% { transform: rotate(360deg)

}

}

@keyframes rotationback {

0% { transform: rotate(360deg) }

100% { transform: rotate(0deg)

}

}原理详解

步骤1

使用span标签作为外围白色部分，并设置宽度、高度均为96px

边框：白色 10px solidwidth : 96px;

height: 96px;

border: 10px solid white;

效果图如下

步骤2

设置span边框上/右边框为solid

下/左边框为dotter(点状)border-style: solid  solid dotted dotted ;

效果图如下

步骤3

使用span::before作为红色部分，并设置相对定位

宽度、高度均为48px

边框：10px 红色 solid

位于白色正方形 正中间(这里使用的是：在span中使用flex布局)width:  48px;

height:  48px;

border: 10px  red solid;

效果图如下

步骤4

设置span::before边框下边框为dotted

其余为solidborder-style: solid  solid  dotted ;

效果图如下

步骤5

span、span::before圆角化border-radius: 50%;

效果图如下

步骤6

为span添加动画顺时针 2s 无限循环animation: rotation 2s linear infinite;/*动画实现*/

@keyframes rotation {

0% { transform: rotate(0deg) }

100% { transform: rotate(360deg)

}

}

效果图如下

步骤7

为span::before设置动画

-逆时针 1s 无限循环/*注意时间*/

animation: rotationback 1s linear infinite;/*动画实现*/

@keyframes rotationback {

0% { transform: rotate(360deg) }

100% { transform: rotate(0deg)

}

}

效果图如下