SORU
4 HAZİRAN 2015, PERŞEMBE

Şimşek oluşturmak tasarım (Flash gibi)

T-shirt with Flash symbol

Yeniden oluşturmak için Flash (DC Comics) (ya da T-shirt giyilir . gelen şimşek sembolü çalışıyorum ^em>Big Bang Theory'nin Sheldon Cooper) CSS em.

Bu yıldız derecelendirme sistemi, 'Yıldırım derecelendirme sistemi' yerine. bir tek gibi hareket edecek

En az HTML tutmaya çalışıyorum beri, ancak css'de bunu tek bir stil istiyorum.

Sahne var:

html,
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
  height: 50vw;
  width: 50vw;
  position: relative;
  margin: 0 auto;
}
.circ:hover{
  background:gray;
  }
.circ:hover .bolt{
  background:gold;
  }
.circ {
  height: 50%;
  width: 50%;
  background: white;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:0 0 10px 2px black;
}
.bolt {
  position: absolute;
  top: 5%;
  left: 50%;
  height: 70%;
  width: 30%;
  background: yellow;
  border: 2px solid black;
  border-bottom: none;
  transform: perspective(200px) skewX(-10deg) rotateX(15deg);
}
.bolt:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 20%;
  height: 50%;
  width: 100%;
  background: inherit;
  border: 2px solid black;
  transform:  ;
}
/*
.bolt:after{
  content:"";
  position:absolute;
  top:-40%;left:20%;
  height:50%;
  width:100%;
  background:inherit;
  transform:perspective(50px) skewX(-10deg) rotateX(45deg);
  }*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrap">

  <div class="circ">

    <div class="bolt"></div>
  </div>
</div>

ama buradan devam etmek nasıl bilmiyorum.

Yaptım çalıştı kullanarak perspective özellik olsa da sanmıyorum ... oldukça zor bir kolu üzerinde henüz - esas olarak, çünkü ben, biraz şaşkın olarak ne yapmak için :before :after özellikleri ne zaman uygulanır üst.

Beyaz arka plan ve cıvata rengi tıklatın değiştirmek olacak, ve CSS ile bunu nasıl biliyorum, çünkü bu CSS seçtim.

(Biliyorum SVG daha iyi bir seçenek olabilir, ama ben değil öğrenir bu nedeniyle zaman kısıtlamaları, bu yüzden tercih ederdim kullanın 'ne nasıl kullanacağımı biliyorum', CSS)

CEVAP
4 HAZİRAN 2015, PERŞEMBE

SVG

Al bakalım@Profesör.CSS. @jbutler483
A Circle
And Polygon

svg {
  background-color: red;
}
<svg width="100px" height="200px" viewBox="0 0 100 150">
  <circle fill="white" stroke="black" cx="50" cy="75" r="50"></circle>
  <polygon stroke="gray" fill="yellow" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
</svg>

ya da css

Aydınlatma ::before ::after sadece kendi elemanları. Aydınlatma kabı drop-shadow.

body {
  background-color: red;
}
.container {
  -webkit-filter: drop-shadow(2px 2px 0px gray);
}
.circle {
  display: inline-block;
  border-radius: 50%;
  background-color: white;
  border: 5px solid black;
  border-color: black;
}
.lightning {
  position: relative;
  margin: 50px;
  width: 30px;
  height: 50px;
  transform-origin: 50% 50%;
  transform: skewX(-30deg) skewY(-30deg) rotate(10deg);
  background-color: yellow;
}
.lightning:before {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent yellow transparent;
  top: -39px;
  left: -17px;
  content: "";
}
.lightning:after {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent transparent yellow;
  bottom: -39px;
  right: -17px;
  content: "";
}
<div class="circle">
  <div class="container">
    <div class="lightning"></div>
  </div>
</div>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
HtmlCssCss3Css-Şekiller SvgSvg

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Android Police

    Android Poli

    21 NİSAN 2010
  • LevelUpTuts

    LevelUpTuts

    20 Ocak 2012
  • Shanice Caruthers

    Shanice Caru

    27 EKİM 2011

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR