HTML+CSS3制作加载

原理：利用透明度（opacity）淡出产生视觉效果 看起来想转动

    1. 先做2个正方体 两个正方体用position: absolute;叠加在一起 

    2. 两个正方体四个角放上对应的点 在border-radius圆角化 其中一个正方形用transfrom:rotateZ(45deg); 旋转45度即可

    3. 用animation 配合@keyframes 关键帧 延迟就可以弄出旋转的感觉

代码如下：

2021-01-20

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {height: 100vh;background-color: #ccc;}
        .bigbox {width: 100px;height: 100px;margin: 100px auto;/*background-color: */pink;position: relative;}
        .box1 {width: 100%;height: 100%;position: absolute;}
        .box1 div:nth-child(1) {position: absolute;top: 0;left: 0;width: 10px;height: 10px;background-color: cyan;}
        .box1 div:nth-child(2) {position: absolute;top: 0;right: 0;width: 10px;height: 10px;background-color: cyan;}
        .box1 div:nth-child(3) {position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;background-color: cyan;}
        .box1 div:nth-child(4) {position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;background-color: cyan;}
        .box2 {width: 100%;height: 100%;/*background-color: */pink;position: absolute;transform: rotateZ(45deg);}
        .box2 div:nth-child(1) {position: absolute;top: 0;left: 0;width: 10px;height: 10px;background-color: cyan;}
        .box2 div:nth-child(2) {position: absolute;top: 0;right: 0;width: 10px;height: 10px;background-color: cyan;}
        .box2 div:nth-child(3) {position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;background-color: cyan;}
        .box2 div:nth-child(4) {position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;background-color: cyan;}
        .box1 div {border-radius: 50%;animation: 2.4s inks infinite;}
        .box2 div {border-radius: 50%;animation: 2.4s inks infinite;}

        @keyframes inks {
            from {opacity: 1;transform: scale(3);}
            to {opacity: 0;transform: scale(1);}
        }
        .box1 div:nth-child(1) {animation-delay: 0;}

        .box2 div:nth-child(1) {animation-delay: .3s;}
        .box1 div:nth-child(2) {animation-delay: .6s;}
        .box2 div:nth-child(2) {animation-delay: .9s;}
        .box1 div:nth-child(3) {animation-delay: 1.2s;}
        .box2 div:nth-child(3) {animation-delay: 1.5s;}
        .box1 div:nth-child(4) {animation-delay: 1.8s;}
        .box2 div:nth-child(4) {animation-delay: 2.2s;}
    </style>
</head>
<body>
<div class="bigbox">
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>

 

posted @ 2021-01-20 15:02  inks  阅读(70)  评论(0)    收藏  举报