skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第204个小实例：彩色圆环溶解加载动画

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2023-02-03 16:46:57 +08:00
parent 4281c781ae
commit 8f89e0dfff
3 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -211,6 +211,7 @@
201. HTML5+CSS3小实例：左右摇晃的输入框
202. HTML5+CSS3+JS小实例：过年3D烟花秀
203. HTML5+CSS3+JS小实例：特殊验证码输入框
204. HTML5+CSS3+Vue小实例：彩色圆环溶解加载动画
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

62
code/204/204.css Normal file
View File

@ -0,0 +1,62 @@
*{
/* 初始化 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* 100%窗口宽高 */
min-height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.loader{
width: 300px;
height: 300px;
background-color: #000;
position: relative;
/* 执行旋转动画：动画名 时长 线性的 无限次播放 */
animation: spin 16s linear infinite;
/* 模糊滤镜+对比度滤镜实现溶球效果 */
filter: blur(2px) contrast(2);
}
.loader i{
width: 16px;
height: 16px;
border-radius: 50%;
background-color: hsl(var(--hue), 75%, 75%);
position: absolute;
left: 150px;
top: 150px;
transform: rotateZ(var(--rz)) translateY(80px);
/* 执行溶球移动消失动画：动画名 时长 加速后减速 无限次播放 */
animation: move 4s ease-in-out infinite;
/* 动画延迟时间 */
animation-delay: var(--delay);
}
/* 定义动画 */
/* 圆环旋转动画 */
@keyframes spin {
to{
transform: rotate(360deg);
}
}
/* 溶球移动消失动画 */
@keyframes move {
0%{
transform: rotateZ(var(--rz)) translateY(64px) translate(0,0) scale(0);
}
2%{
transform: rotateZ(var(--rz)) translateY(64px) translate(0,0) scale(1.25);
}
20%{
transform: rotateZ(var(--rz)) translateY(64px) translate(0,0) scale(1.25);
}
90%,100%{
transform: rotateZ(var(--rz)) translateY(64px) translate(var(--tx),var(--ty)) scale(0);
}
}

24
code/204/204.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩色圆环溶解加载动画</title>
<link rel="stylesheet" href="204.css">
<!-- 引入vue -->
<script src="/js/vue.min.js"></script>
</head>
<body>
<div class="loader">
<i v-for="item,index in 72" :style="{'--rz':(index*5)+'deg','--delay':(4/72*index-4)+'s','--tx':(Math.random(1000)*150)+'px','--ty':(Math.random(1000)*50)+'px','--hue':index*5}"></i>
</div>
</body>
</html>
<script>
new Vue({
el:'.loader',
data:{}
})
</script>