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:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Random Act of Kindness Video Contest

    Random Act o

    18 EYLÜL 2012
  • spyib

    spyib

    9 Ocak 2007

İLGİLİ SORU / CEVAPLAR