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

  • Jorrit Jongma

    Jorrit Jongm

    17 Ocak 2008
  • MW Technology

    MW Technolog

    28 EKİM 2009
  • Tire Rack

    Tire Rack

    31 Mayıs 2007

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR