3 Kreise ineinander verschachtelt css

ich dieses Logo mit CSS zu erstellen versuchen3 Kreise ineinander verschachtelt css

Der Grund, den ich in CSS neu erstellen will, ist so, dass ich jeden einzelnen Kreis animieren? Ich benutze Materialise Framework hier ist eine Kopie von meinem ersten schrecklichen Versuch.

.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; 
 
}

<!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>

Quelle

2016-06-11 pdpascual

Sie wollen werde SVG verwenden – jeremy

ich mit Jeremy voll zustimmen. –

Ich werde nicht zustimmen, ich denke für diese Art von Sache ist es so gut wie für CSS anwendbar. – JackHasaKeyboard

positioniert festen

Hokay, es hat eine Weile gedauert, einen logischen Weg zu finden, aber ich glaube, ich habe es geschafft.

Das Folgende erzeugt 3 Viertel eines Kreises.

3 davon waren ineinander verschachtelt und der Abstand wurde getrennt.

Das Klartext S innerhalb des innersten Teils zu halten funktionierte gut außer der Tatsache, dass Sie die div Elemente transformieren wollten (gedreht) und es keine Möglichkeit gibt, das zu vererben, so dass das S mit seinem Elternteil rotierte.

Der S haben sein eigenes Element und wurde die absolute Positionierung gegeben und der Behälter wurde Ausrichtung gegeben, es zu einer Tabellenzelle ähnlich zu zentrieren:

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

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

Die innerste div wurde dann eine geeignete Größe, dass es hergestellt und ihre Eltern wachsen, um die Gesamtheit des Behälters zu begleiten, so dass es mit dem S zentriert wurde, angesichts der Ränder und Grenzen war es 60px.

Spielen Sie damit herum. Es ist relativ dynamisch, aber Sie müssen ein wenig Mathe tun, um sicherzustellen, dass alles ausgerichtet ist.

Hier ist die Geige: https://jsfiddle.net/JackHasaKeyboard/k6gw9en3/1/

Quelle

2016-06-12 01:47:23 JackHasaKeyboard

Anstelle der Verwendung von "oben" Sie brauchen "margin-top" zu verwenden, da Ihre divs nicht absolut sind oder

.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; 
 
}

<!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>

Quelle

2016-06-11 20:20:35 LordNeo

3 Kreise ineinander verschachtelt css

Antwort

Verwandte Themen