Maison > interface Web > tutoriel CSS > le corps du texte

Propriétés CSS pour dessiner des graphiques

高洛峰
Libérer: 2017-03-01 15:07:24
original
1234 Les gens l'ont consulté

partie p :

<p class="react-logo">
 <p class="reactive"></p></p>
Copier après la connexion

Code CSS :

html, body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-family: &#39;Gloria Hallelujah&#39;, cursive;
    font-size: 100%;
    background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}.react-logo{
  width: 500px;
  height: 160px;
  position: relative;
  border: 15px solid #fff;
  border-radius: 50%;
    box-shadow: #00d8ff 0px 0px 44px 0px;
}.react-logo:before{
  content: "";
  width: 500px;
  height: 160px;
  position: absolute;
  border: 15px solid #aaa;
  border-radius: 50%;
  transform: rotate(125deg);
  top: -25px;
  left: -18px;
    box-shadow: #00d8ff 0px 0px 44px 0px;
}.react-logo:after{
  content: "";
  width: 500px;
  height: 160px;
  position: absolute;
  border: 15px solid #00d8ff;
  border-radius: 50%;
  transform: rotate(-125deg);
  top: -25px;
  left: -18px;
    box-shadow: #00d8ff 0px 0px 44px 0px;
}.reactive{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #aaf;
  border-radius: 50%;
  margin-left: calc(50% - 50px);
  margin-top: 30px;
    box-shadow: #00d8ff 0px 0px 44px 0px;
}
Copier après la connexion

Effet final :

Propriétés CSS pour dessiner des graphiques

Pour plus d'articles sur le dessin de graphiques avec des propriétés CSS, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!