zoukankan      html  css  js  c++  java
  • 17.纯 CSS 创作炫酷的同心矩形旋转动画

    原文地址:https://segmentfault.com/a/1190000014807564

    感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了。

    HTML代码:

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

    CSS代码:

    html, body ,.loader{
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }
    /* 设置span的样式 */
    .loader{
        position: relative;
        width: 10em;
        height: 10em;
        font-size: 28px;
    }
    .loader span{
        position: absolute;
        width: 100%;
        height: 100%;
        /* 0.3表示透明度 */
        background-color: rgba(100%, 0%, 0%, 0.3);
        /* 并排 */
        box-sizing: border-box;
        border: 0.5em solid;
        /* border-color: 上下  左右 */
        border-color: white rgba(100%, 100%, 100%, 0.2);
        /* 动画名称 周期 节奏 循环次数 是否反向播放 */
        animation: animate 5s ease-in-out infinite alternate;
    }
    @keyframes animate{
        0%{
            /* red */
            /* 颜色变换 */
            background-color: rgba(100%, 0%, 0%, 0.3);
            /* 旋转 */
            transform: rotate(0deg);
        }
        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);
            transform: rotate(720deg);
        }
    }
    /* 分别设置5个span的尺寸 */
    .loader span:nth-child(1){
        width: calc(20% + 20% * (5-1));
        height: calc(20% + 20% * (5-1));
        /* 为每个span设置动画延时 */
        animation-delay: calc(0.2s * (5-1));
    }
    .loader span:nth-child(2) {
        width: calc(20% + 20% * (5 - 2));
        height: calc(20% + 20% * (5 - 2));
        animation-delay: calc(0.2s * (5 - 2));
    }
    .loader span:nth-child(3) {
        width: calc(20% + 20% * (5 - 3));
        height: calc(20% + 20% * (5 - 3));
        animation-delay: calc(0.2s * (5 - 3));
    }
    .loader span:nth-child(4) {
        width: calc(20% + 20% * (5 - 4));
        height: calc(20% + 20% * (5 - 4));
        animation-delay: calc(0.2s * (5 - 4));
    }
    .loader span:nth-child(5) {
        width: calc(20% + 20% * (5 - 5));
        height: calc(20% + 20% * (5 - 5));
        animation-delay: calc(0.2s * (5 - 5));
    }
    作者:人生与戏
    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    MVC4笔记 @functions @model @using
    NET平台4.0 发布网站流程及出错总结
    C#读写txt文件的方法
    jQuery Validate验证框架详解(转)
    用C#写的读写CSV文件
    devexpress 数据导入(gridcontrol 导出 csv)
    DevExpress XtraGrid 数据导出导入Excel
    DevExpress 表中数据导出
    DevExpress 重编译 替换强命名 修改源码
    Delphi 的运算符列表
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10243587.html
Copyright © 2011-2022 走看看