如何使用纯CSS实现宝路薄荷糖的动画

2024-01-17 11:26 小编
    源代码下载
    https://github.com/comehope/front-end-daily-challenges
    代码解读
    定义dom,只有1个元素:
    <divclass="spinner"></div>
    居中显示:
    body{
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:silver;
    }
    定义容器尺寸:
    .spinner{
    width:50vmin;
    height:50vmin;
    position:relative;
    }
    用before伪元素画出1个像宝路薄荷糖状的黑色圆环:
    .spinner::before{
    content:'';
    position:absolute;
    box-sizing:border-box;
    width:inherit;
    height:inherit;
    border:12.5vminsolid;
    border-radius:50%;
    }
    接下来制作动画效果。
    设置透视景深:
    body{
    perspective:400px;
    }
    让圆环在z轴上运动:
    .spinner::before{
    animation:spin1.5sease-in-outinfinitebothreverse;
    }
    @keyframesspin{
    0%,100%{
    transform:translateZ(10vmin);
    }
    60%{
    transform:translateZ(-10vmin);
    }
    }
    让圆环在z轴距离较大时稍稍倾斜:
    @keyframesspin{
    0%,100%{
    transform:translateZ(10vmin)rotateX(25deg);
    }
    60%{
    transform:translateZ(-10vmin);
    }
    }
    增加缩放效果:
    @keyframesspin{
    0%,100%{
    transform:translateZ(10vmin)rotateX(25deg);
    }
    33%{
    transform:translateZ(-10vmin)scale(0.4);
    }
    60%{
    transform:translateZ(-10vmin);
    }
    }
    用after伪元素再画出一个白色的圆环,并且让它的动画延迟动画总长的一半时间:
    .spinner::before,
    .spinner::after{
    /*略*/
    animation:spin1.5sease-in-outinfinitebothreverse;
    }
    .spinner::after{
    border-color:white;
    animation-delay:-0.75s;
    }
    接下来制作容器的动画效果,为了不受子元素动画的影响,先暂时屏蔽伪元素的动画效果。
    .spinner::before,
    .spinner::after{
    /*animation:spin1.5sease-in-outinfinitebothreverse;*/
    }
    增加容器沿x轴旋转的动画效果,动画时间为子元素动画时间的2倍:
    .spinner{
    animation:wobble3sease-in-outinfinite;
    }
    @keyframeswobble{
    0%,100%{
    transform:rotateX(15deg);
    }
    50%{
    transform:rotateX(60deg);
    }
    }
    增加容器沿y轴旋转的动画效果:
    @keyframeswobble{
    0%,100%{
    transform:rotateX(15deg)rotateY(60deg);
    }
    50%{
    transform:rotateX(60deg)rotateY(-60deg);
    }
    }
    增加容器整体旋转的动画效果:
    @keyframeswobble{
    0%,100%{
    transform:rotateX(15deg)rotateY(60deg);
    }
    50%{
    transform:rotateX(60deg)rotateY(-60deg)rotate(180deg);
    }
    }
    打开子元素的动画效果,使子元素的动画效果和容器的动画效果叠加:
    .spinner::before,
    .spinner::after{
    animation:spin1.5sease-in-outinfinitebothreverse;
    }
    最后,使子元素在3d空间上运动:
    .spinner{
    transform-style:preserve-3d;
    }


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码