分析ATOM官网首页css动画部分

这是链接 atom官网链接

整体代码分析
大概就是这样

<div>
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
</div>

这个div充当一个容器的角色，接下来的img依靠这个容器开始定位利用position:absolute定位 当然这个容器也用了position:relative

这其实就是好几张图片重叠在一起 定位的位置必须相同 图片大小也必须相同 利用transform跟animation这俩个属性进行动画的制作

– transform 属性向元素应用2D或者3D转换，该属性允许我们对元素进行旋转、缩放、移动、倾斜
附一张w3chool的表

懒得自己写这么多一大堆。。。。

–animation 属性 简写属性 将动画与div元素绑定：

嗯 自己看

接下来就是怎么做了

transform有一个叫 rotate的值 用法有这么几种 rotate(1turn) 1turn代表了1圈 1turn==360deg
这里的动画就利用了transfom = rotate(1turn) 让所有的图片都转一圈 当然 是绕着这图片的中心点

animation 可以设置动画完成一次的事件 设置动画运动的规律 设置次数等等

可以看到他设置了一个动画名字 1秒 一个运动规律

然后他还给每一个img设置了动画时间

这里@keyframes 这个是设置一个动画的名字 这个动画叫做hero-logo-circle

额 关于这个属性 就看这里

嗯 组合起来了 首先我们制作了一个动画 然后把这个动画绑定给这个容器 然后 然后利用animation设置一些参数 就制作完成了
嗯 就是这样