css+div实现三维loading加载文字飘动动画效果代码-html代码-BFW代码库

css+div实现三维loading加载文字飘动动画效果代码

代码语言：html

代码描述：css+div实现三维loading加载文字飘动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>



.container {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 60vh;
    background-color: #789;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.waving {
    perspective: 1000px;
    -moz-perspective: 1000px
}

.waving>* {
    display: inline-block;
    font-size: 5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    transform-origin: top;
    animation: waving 1s infinite ease-in-out;
    animation-fill-mode: backwards
}

.waving>*:nth-child(1) {
    animation-delay: .12s
}

.waving>*:nth-child(2) {
    animation-delay: .24s
}

.waving>*:nth-child(3) {
    animation-delay: .36s
}

.waving>*:nth-child(4) {
    animation-delay: .48s
}

.waving>*:nth-child(5) {
    animation-delay: .6s
}

.waving>*:nth-child(6) {
    animation-delay: .72s
}

.waving>*:nth-child(7) {
    animation-delay: .84s
}

.waving>*:nth-child(8) {
    animation-delay: .96s
}

.waving>*:nth-child(9) {
    animation-delay: 1.08s
}

.waving>*:nth-child(10) {
    animation-delay: 1.2s
}

.waving>*:nth-child(11) {
    animation-delay: 1.32s
}

.waving>*:n.........完整代码请登录后点击上方下载按钮下载查看