前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

图片描述

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/bMvbRp

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cp2dZcQ

源代码下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/017-swapping-colors-loader-animation

代码解读

定义 dom,一个容器中包含一个 span:

<div class="loader">
    <span></span>
</div>

居中显示:

html,
body,
.loader {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

设置 span 的样式:

.loader {
    width: 10em;
    height: 10em;
    font-size: 28px;
    position: relative;
}

.loader span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(100%, 0%, 0%, 0.3);
    box-sizing: border-box;
    border: 0.5em solid;
    border-color: white rgba(100%, 100%, 100%, 0.2);
}

在 dom 中把 span 增加到 5 个:

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

分别设置 5 个 span 的尺寸:

.loader span:nth-child(1) {
    width: calc(20% + 20% * (5 - 1));
    height: calc(20% + 20% * (5 - 1));
}

.loader span:nth-child(2) {
    width: calc(20% + 20% * (5 - 2));
    height: calc(20% + 20% * (5 - 2));
}

.loader span:nth-child(3) {
    width: calc(20% + 20% * (5 - 3));
    height: calc(20% + 20% * (5 - 3));
}

.loader span:nth-child(4) {
    width: calc(20% + 20% * (5 - 4));
    height: calc(20% + 20% * (5 - 4));
}

.loader span:nth-child(5) {
    width: calc(20% + 20% * (5 - 5));
    height: calc(20% + 20% * (5 - 5));
}

增加颜色变幻的动画效果:

.loader span {
    animation: animate 5s ease-in-out infinite alternate;
}

@keyframes animate {
    0% {
        /* red */
        background-color: rgba(100%, 0%, 0%, 0.3);
    }

    25% {
        /* yellow */
        background-color: rgba(100%, 100%, 0%, 0.3);
    }

    50% {
        /* green */
        background-color: rgba(0%, 100%, 0%, 0.3);
    }

    75% {
        /* blue */
        background-color: rgba(0%, 0%, 100%, 0.3);
    }

    100% {
        /* purple */
        background-color: rgba(100%, 0%, 100%, 0.3);
    }
}

再增加旋转效果:

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

最后,为每个 span 设置动画延时,增加动感:

.loader span:nth-child(1) {
    animation-delay: calc(0.2s * (5 - 1));
}

.loader span:nth-child(2) {
    animation-delay: calc(0.2s * (5 - 2));
}

.loader span:nth-child(3) {
    animation-delay: calc(0.2s * (5 - 3));
}

.loader span:nth-child(4) {
    animation-delay: calc(0.2s * (5 - 4));
}

.loader span:nth-child(5) {
    animation-delay: calc(0.2s * (5 - 5));
}

知识点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值