码迷,mamicode.com
首页 > 其他好文 > 详细

8.五环

时间:2018-05-30 14:28:31      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:utf-8   family   ati   char   1.0   mil   har   circle   form   

线上地址http://lsenlin.top/fiveCircle/circle.html

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .container{
        width:360px;
        height:150px;
        border:1px solid ;
        position:relative;
    }
    .c1,.c2,.c3,.c4,.c5{
        position: absolute;
        box-sizing:border-box;
        width:100px;
        height:100px;
        border-radius:50%;
    }
    .c1{
        top:0;
        left:0;
        border-color:#1587c1;
        transform: rotate(270deg);
    }
    .c2{
        top:0;
        left:130px;
        border-color:#000;
        transform:rotate(90deg);
    }
    .c3{
        top:0;
        left:260px;
        border-color: #eb3350;
        transform:rotate(90deg);
    }
    .c4{
        top:38px;
        left:65px;
        border-color:#fab23f;;
    }
    .c5{
        top:38px;
        left:195px;
        border-color:#1f8b3d;
        transform:rotate(90deg);
    }
    .ring{
        z-index:0;
        border-bottom-color:transparent;
    }
    .c1-index,.c2-index,.c5-index{
        z-index:1;
    }
    .c3-index{
        z-index:2;
    }    
</style>
<body>
    <div class="container">
        <div class="c1"></div>
        <div class="c1 ring c1-index"></div>
        <div class="c2"></div>
        <div class="c2 ring c2-index"></div>
        <div class="c3"></div>
        <div class="c3 ring c3-index"></div>
        <div class="c4"></div>
        <div class="c4 ring "></div>
        <div class="c5"></div>
        <div class="c5 ring c5-index"></div>
    </div>
</body>
</html>

8.五环

标签:utf-8   family   ati   char   1.0   mil   har   circle   form   

原文地址:https://www.cnblogs.com/stone5/p/9110566.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!