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

新增第123个小实例：3D圆点波浪动画特效

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-03-14 17:45:52 +08:00
parent 5805dfc5f0
commit 22f0751a31
4 changed files with 158 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -126,4 +126,5 @@
119. HTML5+CSS3小实例：双层波浪动画特效
120. HTML5+CSS3+JS小实例：阿里云盘的侧边导航栏
121. HTML5+CSS3小实例：飞行的钢铁侠loading加载动画
122. HTML5+CSS3小实例：高光立体壁画式卡片悬停特效
122. HTML5+CSS3小实例：高光立体壁画式卡片悬停特效
123. HTML5+CSS3+Vue小实例：3D圆点波浪动画特效

105
code/123/123.css Normal file
View File

@ -0,0 +1,105 @@
*{
/* 初始化 */
margin: 0;
padding: 0;
}
div{
/* 所有的div都开启3D效果 */
transform-style: preserve-3d;
}
#container{
/* 100%窗口宽度和高度 */
width: 100vw;
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(to top,#1b2735,#090a0f);
/* 溢出隐藏 */
overflow: hidden;
/* 设置视距 */
perspective: 500px;
}
.camera{
/* 绝对定位 */
position: absolute;
width: 100%;
height: 100%;
/* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
}
.camera.-x{
transform: rotateX(60deg);
}
.camera.-y{
transform: rotateY(0deg);
}
.camera.-z{
/* 执行z轴旋转动画：动画名 时长 线性的 无限次播放 */
animation: rotateZ 30s linear infinite;
}
.sea{
width: 250px;
height: 250px;
/* 相对定位 */
position: relative;
/* 网格布局 */
display: grid;
/* 10行10列，每个宽高均为7.5% */
grid-template-rows: repeat(10,7.5%);
grid-template-columns: repeat(10,7.5%);
grid-gap: 2.5%;
}
.wave{
/* 执行波浪动画:动画名 时长 贝塞尔曲线 无限次播放 来回轮流播放 */
animation: wave 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
/* 设置动画延迟时间,通过var函数调用自定义属性--d */
animation-delay: var(--d);
}
.counter{
position: absolute;
width: 100%;
height: 100%;
}
.counter.-x{
transform: rotateX(-60deg);
}
.counter.-y{
transform: rotateY(0deg);
}
.counter.-z{
/* 执行z轴方向旋转动画 */
animation: rotateZ 30s linear infinite reverse;
}
.ball{
width: 100%;
height: 100%;
/* 背景径向渐变 */
background: radial-gradient(circle at 0px 3px,#fff,#69a8cc 60%,#23315c);
border-radius: 100%;
/* 投影 这里不用box-shadow,用drop-shadow效果更佳 */
/* box-shadow: 0 100px 12px rgba(96,148,179,0.2); */
filter: drop-shadow(0 100px 12px rgba(96,148,179,0.2));
}
/* 定义动画 */
@keyframes rotateZ {
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}
}
@keyframes wave {
0%{
transform: translateZ(0);
}
100%{
transform: translateZ(30px);
}
}

45
code/123/123.html Normal file
View File

@ -0,0 +1,45 @@
<!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>3D圆点波浪动画特效</title>
<link rel="stylesheet" href="123.css">
<!-- 引入vue，这里我为了代码简洁，用了vue的语法 -->
<script src="/js/vue.min.js"></script>
<!-- 不想用vue的同学也可以用js实现，挑战一下，看看自己能不能写出来 -->
</head>
<body>
<div id="container">
<div class="camera -x">
<div class="camera -y">
<div class="camera -z">
<div class="sea">
<!-- --d为自定义属性,css中可通过var函数对其调用,这里用来存放每个wave的动画延迟时间(单位毫秒) -->
<div class="wave" v-for="item in 100" :style="{'--d':item*-30+'ms'}">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="ball"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
new Vue({
el:'#container',
data:{}
})
</script>

6
js/vue.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long