Ich versuche, das Blitzsymbol aus The Flash (DC Comics) (oder dem T-Shirt von Sheldon Cooper von Big Bang Theory ) in CSS neu zu erstellen .
Dies wird sich wie ein Sternebewertungssystem verhalten, stattdessen nur wie ein Blitzbewertungssystem.
Da ich jedoch versuche, den HTML-Code auf ein Minimum zu beschränken, möchte ich dies nur in CSS formatieren.
Ich bin auf der Bühne von:
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>aber ich weiß nicht, wie ich von hier aus weitermachen soll.
Ich habe versucht, die perspectiveEigenschaft zu verwenden, obwohl ich glaube, dass ich sie noch nicht ganz im Griff habe - hauptsächlich, weil ich etwas verwirrt bin, was sie mit den Eigenschaften :beforeund tut, :afterwenn sie auf die angewendet wird Elternteil.
Ich habe CSS dafür ausgewählt, da sich der weiße Hintergrund und die Schraubenfarbe beim Klicken ändern und weil ich weiß, wie man das mit CSS macht.
(Ich weiß, dass SVG hier eine bessere Option ist, aber ich konnte dies aus zeitlichen Gründen nicht lernen. Daher würde ich lieber "Was ich weiß, wie man es verwendet" verwenden, dh CSS.)
