纯CSS下的loading贰

最新推荐文章于 2024-07-19 15:50:46 发布

Johnny_Pig

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量406

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/Johnny_Pig/article/details/51239588

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

由于昨晚的loading过于简单,今晚又重新选择了一个demo进行实现.照例,demo地址:http://codepen.io/jcoulterdesign/full/bNxeKY

原码在最上链接可以看到,不过依旧对新手不够友好.自己也对demo进行了略微的更改,还是介绍一下思路再代码实例,最后证明,数学基础与思想很重要,通过几何分析便可以轻松通过简单图形叠加实现复杂的动画.

首先来看这个demo分为两层,第一层为中间一个透明带边框的圆形,第二层为三个旋转的齿轮,也是demo的重点.上下层可以通过z-index来实现.

三个齿轮也都是相同原理只是大小颜色不同实现一个即可复制实现另外两个.

分析一下这个齿轮也不难,是由三个圆角的正方形旋转叠加后的结果,中间叠加一个白色的圆形即可,将所有形状包含在一个div里面,旋转总的div即可实现总体旋转.

图一为一个正方形,图二为两个正方形叠加,图三为三个.

图一:图二:图三

实现这个并不困难,圆角border-radius,角度旋转transform:rotate(60deg).xianzai

此时会发现,后面的带position:absolute的属性元素会自动覆盖重复位置的前面的absolute的元素,就像是设置了z-index属性一样,同样也可以实际设置z-index来强制前面的absolute元素在上层显示.

同时,由于是loading的demo,完全可以将所有元素设置position:absolute,但是在常规网页布局中一定要慎用absolute,

这个demo中absolute居中的方式与昨天demo中不一样,今天提供了一种新的,对比一下

第一种: 第一种是设置div左角的point点向上向左移动元素对应边一般的距离.

div {
 width:400px;
 height:400px;
 position: absolute;
 left:50%;
 top:50%;
 margin-top:-200px;
 margin-left:-200px;
}

第二种设置四个方向全为0,通过margin:auto来实现居中

div {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

下面代码是完整的 Demo代码,只实现了一个齿轮,另两个留给机智的你去实现了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="loading21.css">
</head>
<body>

<div class='loader'>
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class="top_hole"></div>
        </div>
        <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'><!-- lol --></div>
        </div>
    </div>
</div>

</body>
</html>

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* Variables */
/* Mixins */
body {
    height:1000px;
}
body .loader {
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -200px;
    margin-left: -200px;
    width: 400px;
    height:400px;
}
body .loader_overlay {
    width: 150px;
    height: 150px;
    //background: transparent;
    box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -75px;
}

body .loader_cogs__top {
    z-index: -2;
    position: absolute;
    width: 100px;
    height: 100px;
    margin-left: 150px;
    margin-top: 80px;
    animation: rotate 10s infinite linear;
}
body .loader_cogs__top div.top_part {
    width: 100px;
    border-radius: 10px;
    position: absolute;
    height: 100px;
    background: #f98db9;
}

body .loader_cogs__top div:nth-of-type(1) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
body .loader_cogs__top div:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
body .loader_cogs__top div:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

body .loader_cogs__top div.top_hole {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Johnny_Pig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS下的loading贰

由于昨晚的loading过于简单,今晚又重新选择了一个demo进行实现.照例,demo地址:http://codepen.io/jcoulterdesign/full/bNxeKY原码在最上链接可以看到,不过依旧对新手不够友好.自己也对demo进行了略微的更改,还是介绍一下思路再代码实例,最后证明,数学基础与思想很重要,通过几何分析便可以轻松通过简单图形叠加实现复杂的动画.首先来看
复制链接

扫一扫