更新第55个小实例
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
6ada39e823
commit
c836caf94d
|
|
@ -58,4 +58,5 @@
|
|||
51. HTML5+CSS3小实例之动感的金属质感闪光文字
|
||||
52. HTML5+CSS3小实例之高级感满满的滚轮视差响应效果
|
||||
53. HTML5+CSS3小实例之有趣的幽灵文字特效
|
||||
54. HTML5+CSS3小实例之涟漪特效按钮
|
||||
54. HTML5+CSS3小实例之涟漪特效按钮
|
||||
55. HTML5+CSS3小实例之酷炫的环形加载动画
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
}
|
||||
.container{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.container .circle{
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid transparent;
|
||||
margin: -30px;
|
||||
/* 通过var函数调用自定义属性--c（颜色） */
|
||||
border-top: 5px solid var(--c);
|
||||
/* 通过var函数调用自定义属性--a（动画名称） */
|
||||
/* 执行动画：动画名 时长 线性的 无限次播放 */
|
||||
animation: var(--a) 3s linear infinite;
|
||||
}
|
||||
/* 发光头 */
|
||||
.container .circle::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
/* 通过var函数调用自定义属性--c（颜色） */
|
||||
background-color: var(--c);
|
||||
border-radius: 50%;
|
||||
/* 阴影（发光效果） */
|
||||
box-shadow:
|
||||
0 0 5px var(--c),
|
||||
0 0 10px var(--c),
|
||||
0 0 20px var(--c),
|
||||
0 0 40px var(--c),
|
||||
0 0 80px var(--c);
|
||||
}
|
||||
/* 第三个圆 */
|
||||
.container .circle:nth-child(3){
|
||||
position: absolute;
|
||||
top: -66.66px;
|
||||
/* 设置自定义属性--c（颜色） */
|
||||
--c: lightgreen;
|
||||
/* 设置自定义属性--a（动画） */
|
||||
--a: animate2;
|
||||
/* 调整边框 */
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 5px solid var(--c);
|
||||
/* 调整动画延迟时间 */
|
||||
animation-delay: -2s;
|
||||
}
|
||||
/* 第二个圆 */
|
||||
.container .circle:nth-child(2){
|
||||
/* 设置自定义属性--c（颜色） */
|
||||
--c: lightsalmon;
|
||||
/* 设置自定义属性--a（动画） */
|
||||
--a: animate2;
|
||||
/* 调整边框 */
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 5px solid var(--c);
|
||||
/* 调整动画延迟时间 */
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
/* 第一个圆 */
|
||||
.container .circle:nth-child(1){
|
||||
/* 设置自定义属性--c（颜色） */
|
||||
--c: lightskyblue;
|
||||
/* 设置自定义属性--a（动画） */
|
||||
--a: animate1;
|
||||
}
|
||||
.container .circle:nth-child(3):before,
|
||||
.container .circle:nth-child(2):before{
|
||||
/* initial关键字用于设置CSS属性为它的默认值 */
|
||||
top: initial;
|
||||
left: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes animate1 {
|
||||
0%{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes animate2 {
|
||||
0%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>酷炫的环形加载动画</title>
|
||||
<link rel="stylesheet" href="../css/55.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue