纯css 模拟gif图的loading的样式之一

1. 在正文的第一句加入“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

利用css3的动画功能 模拟gif图loading的动画效果 是前端小伙伴的不二选择 一般在移动端 很少会出现兼容性问题(大部分主流机型都可以)，pc端除非兼容ie比较老的浏览器

咱们这次实现的是loading是 两个圆形的 有时间间隔的变大变小

在利用css动画之前我们先要熟悉我们将要用到的css3 属性 perspective 景深相当于眼睛距离元素的位置距离 这个属性可以让物体看起来有3d效果 animation: 动画名称 时间 运动形式(是匀速运动还是曲速运动) 间隔时间(不写直接略过) 动画次数(可以写数字，或infinite无限次) 一般常用的属性就这几个 如果想了解更多去w3c学习更多属性 www.runoob.com/cssref/css3…

animation动画也可以单独设置

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count

@keyframes 关键帧的写法 动画名字 然后就是既可以用百分比来描述每个阶段的运动轨迹 也可以用from to 关键字只关心开始和结束的运动轨迹

布局方面两个div 重叠在一起(利用绝对定位absolute) 也可以使用其他布局来实现

两个div的运动轨迹是一样 需要使用animation-delay 属性让其中一个div 延迟执行1s的动画就可以了

下面是html布局

 <div class="rotating-plane">
     <div class="child child-dance1"></div>
     <div class="child child-dance2"></div>
 </div>

这格式css 样式的写法

        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body{
            background-color: #000;
            perspective: 100px;
        }
        .rotating-plane{
            width: 64px;
            height: 64px;
            position: relative;
            margin: 30px auto;
        }
        .rotating-plane .child {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: pink;
            opacity: .6;
            position: absolute;
            animation:circle 2s ease-in-out infinite;

        }
        .rotating-plane .child-dance2{
            animation-delay: 1s;
        }
        /* 动画*/
        @keyframes circle
        {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
        [}](url)

这个是 可执行的代码块 可以点进去运行查看

• 纯css 模拟gif图的loading

[欢迎大家]