css使五环居中两两相扣

最新推荐文章于 2019-10-24 11:06:37 发布

巷中人

最新推荐文章于 2019-10-24 11:06:37 发布

阅读量144

点赞数

原文链接：http://www.cnblogs.com/miria-486/p/10691433.html

版权

思路：

1.首先构建五个环：把一个正方形用border-radiu设置成圆形，border控制环的宽度，五环的各自的div的top和left控制位置，使形成五环的样子。

2.运用伪元素的，用 z-index控制优先级， border-*-color: transparent;控制透明。

由于有限级都是一样的，所有前面的显示。控制透明的就可以显示出下面的元素，所以把1的下，2左，3左，5的上又透明，从而构成两两相扣。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*使用伪元素实现五环两两相扣*/
        .aoyun{
            /*
            使div在屏幕中央，不随屏幕移动
            */
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left:-350px;
            margin-top: -140px;
            width: 690px;
            height: 330px;
            background-color: bisque;
            opacity: 0.5;
        }
        .a1,.a2,.a3,.a4,.a5{
            width: 200px;/**/
            height: 200px;
            border: 10px solid;
            border-radius: 50%;
            position: absolute;
        }
        .a1::after,.a2::after,.a3::after,.a4::after,.a5::after{
            width: 200px;
            height: 200px;
            border: 10px solid;
            border-radius: 50%;
            position: absolute;
            content: "";
            left: -10px;
            top:-10px;
        }
        .a1{
            border-color: blue;
            top:0;
            left: 0;
        }
        .a1::after{
            border-color: blue;
            z-index: 1;
            border-bottom-color: transparent;/*使的下半部分为透明，从而显示出来下面的元素*/
        }
        .a2{
            border-color: black;
            top:0;
            left: 230px;
        }
        .a2::after{
            border-color: black;
            z-index: 1;
            border-left-color: transparent;
        }
        .a3{
            border-color: red;
            top:0;
            left: 460px;
        }
        .a3::after{
            border-color: red;
            z-index: 1;
            border-left-color: transparent;
        }
        .a4{
            border-color: yellow;
            top:110px;
            left: 110px;
        }
        .a4::after{
            border-color: yellow;
        }
        .a5{
            border-color: green;
            top:110px;
            left: 340px;
        }
        .a5::after{
            border-color: green;
            z-index: 1;
            border-top-color: transparent;
            border-right-color: transparent;
        }
    </style>
</head>
<body>
    <div class="aoyun">

        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
        <div class="a5"></div>
    
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/miria-486/p/10691433.html

巷中人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css使五环居中两两相扣

思路：1.首先构建五个环：把一个正方形用border-radiu设置成圆形，border控制环的宽度，五环的各自的div的top和left控制位置，使形成五环的样子。2.运用伪元素的，用 z-index控制优先级， border-*-color: transparent;控制透明。由于有限级都是一样的，所有前面的显示。控制透明的就可以显示出下面的元素，所以把1的下，2左，...
复制链接

扫一扫