45 lines
1.0 KiB
CSS
45 lines
1.0 KiB
CSS
*{
|
||
/* 初始化 */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body{
|
||
/* 100%窗口高度 */
|
||
height: 100vh;
|
||
/* 弹性布局 水平垂直居中 */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #000;
|
||
}
|
||
.wavy{
|
||
/* 相对定位 */
|
||
position: relative;
|
||
/* 倒影效果 */
|
||
-webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));
|
||
}
|
||
.wavy span{
|
||
position: relative;
|
||
display: inline-block;
|
||
color: #fff;
|
||
font-size: 50px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 8px;
|
||
/* 执行动画：动画名 时长 加速后减速 无限次播放 */
|
||
animation: wavyAnimate 1s ease-in-out infinite;
|
||
/* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */
|
||
animation-delay: calc(0.1s * var(--i));
|
||
}
|
||
|
||
/* 定义动画 */
|
||
@keyframes wavyAnimate {
|
||
0%{
|
||
transform: translateY(0);
|
||
}
|
||
20%{
|
||
transform: translateY(-20px);
|
||
}
|
||
40%,100%{
|
||
transform: translateY(0);
|
||
}
|
||
} |