3个圆圈彼此嵌套在一起css

时间：2016-06-11 20:07:19

标签： html css css3 sass

我正在尝试使用CSS创建此徽标

Logo

我想在CSS中重新创建的原因是我可以为每个圆圈制作动画？我在这里使用Materialise Framework是我第一次可怕的尝试的副本。

＆＃13;
＆＃13; 
.hero {
  background-color: #7EEDE2;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.circleOne {
  margin: auto;
  top: 50%;
  width: 200px;
  height: 200px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 10px solid gray;
  border-bottom: 0;
}
.circleTwo {
  margin: auto;
  top: 50%;
  width: 150px;
  height: 150px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 10px solid gray;
  border-bottom: 0;
}
.circleThree {
  margin: auto;
  top: 50%;
  width: 100px;
  height: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 10px solid gray;
  border-bottom: 0;
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--Import Google Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <!-- Import Framework -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <!--Import Style Sheets-->
    <link href="css/main.css" rel="stylesheet">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>SpecterMedia</title>
  </head>
  <body>
    <nav class="darkBlue" role="navigation">
      <div class="nav-wrapper">
        <a id="logo-container" href="#" class="brand-logo center">Secter<span>Media</span></a>
      </div>
    </nav>
    <div class="row hero valign-wrapper">
      <div class="col s4 offset-s4">
        <div class="circleOne"><div class="circleTwo"><div class="circleThree"></div></div></div>
        <h5 class="center"> Catchy Text </h5>
        <div class="section center">
          <a class="waves-effect waves-light btn-large hoverable">Get Your Free Quote Now</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 intro">
      </div>
    <!--Import jQuery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!--Import frameworkjs-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

而不是使用＆＃34; top＆＃34;你需要使用＆＃34; margin-top＆＃34;因为你的div不是绝对的或固定的

＆＃13;
＆＃13; 
.hero {
  background-color: #7EEDE2;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.circleOne {
  margin: auto;
  top: 50%;
  width: 200px;
  height: 200px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 10px solid gray;
  border-bottom: 0;
}
.circleTwo {
  margin: auto;
  margin-top: 8%;
  width: 150px;
  height: 150px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 10px solid gray;
  border-bottom: 0;
}
.circleThree {
  margin: auto;
  margin-top: 10%;
  width: 100px;
  height: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 10px solid gray;
  border-bottom: 0;
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--Import Google Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <!-- Import Framework -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <!--Import Style Sheets-->
    <link href="css/main.css" rel="stylesheet">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>SpecterMedia</title>
  </head>
  <body>
    <nav class="darkBlue" role="navigation">
      <div class="nav-wrapper">
        <a id="logo-container" href="#" class="brand-logo center">Secter<span>Media</span></a>
      </div>
    </nav>
    <div class="row hero valign-wrapper">
      <div class="col s4 offset-s4">
        <div class="circleOne"><div class="circleTwo"><div class="circleThree"></div></div></div>
        <h5 class="center"> Catchy Text </h5>
        <div class="section center">
          <a class="waves-effect waves-light btn-large hoverable">Get Your Free Quote Now</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s12 intro">
      </div>
    <!--Import jQuery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!--Import frameworkjs-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

Hokay，想出一个合乎逻辑的方法来完成这个花了一段时间，但我相信我已经得到了它。

以下内容生成3个季度的圆圈。

div {
  border: 5px solid blue;
  border-top-color: transparent;
  border-radius: 50%;
  margin: 5px;
}

其中3个嵌套在彼此之内，边缘将它们隔开。

在最里面的div中粘贴纯文本S工作得很好，除了你想要转换（旋转）div个元素，并且没有办法阻止它被继承，所以S与其父母一起轮换。

S得到了自己的元素，并获得了绝对的定位，并且容器被赋予对齐以使其类似于表格单元格中心：

#container {
  background: grey;
  display: table-cell;
  text-align: center;
}

h3 {
    line-height: 120px;
    width: 120px;
    position: absolute;
    margin: 0;
}

最里面的div是一个合适的大小，使它和它的父母一起成长为伴随着整个容器，所以它以S为中心，给定边距和边界为60px。

玩弄它。它相对有活力，但你必须做一些数学运算才能确保一切都是一致的。

这里是小提琴：https://jsfiddle.net/JackHasaKeyboard/k6gw9en3/1/

相关问题
最新问题