创建闪电设计（如Flash） [英] Create a lightning bolt design (like The Flash)
问题描述
我试图在CSS中重新创建闪电符号（DC漫画）（或大爆炸理论佩戴的大爆炸理论的Sheldon Cooper）。
这将是一个星级评分系统，只是一个闪电评级系统。
尝试保持HTML的最小值，我想在CSS样式这个。
我已经到了阶段：
html，body {margin：0;高度：100％;背景：径向梯度（中心椭圆，rgba（79,79,79,1）0％，rgba（34,34,34,1）100％）;} wrap {height：50vw; width：50vw;位置：相对; margin：0 auto;}。circ：hover {background：gray; } .circ：hover .bolt {background：gold; } .circ {height：50％; width：50％;背景：白色; border：5px solid black; border-radius：50％; position：absolute; top：50％;左：50％; transform：translate（-50％，-50％）; box-shadow：0 0 10px 2px black;}。bolt {position：absolute; top：5％;左：50％;身高：70％宽度：30％;背景：黄色; border：2px solid black; border-bottom：none; transform：perspective（200px）skewX（-10deg）rotateX（15deg）;}。bolt：before {content：; position：absolute; top：90％;左：20％;身高：50％; width：100％;背景：inherit; border：2px solid black; transform：;} / *。bolt：after {content：;位置：绝对;顶部：-40％;左侧：20％;身高：50％; width：100％;背景：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>
我尝试使用透视属性，虽然我不认为我还有一个句柄，因为至今 - 主要是因为我对于：和之前的操作有些困惑。 ：
我选择了CSS作为白色背景，并且螺栓颜色将改变点击，因为我知道如何使用CSS。
（我知道SVG可能是一个更好的选择，但我还没有能够学习这是因为时间限制，所以我宁愿使用我知道如何使用，这是CSS）
SVG
在这里，您可以参加 @ Professor.CSS 。 @ jbutler483
圈子
和多边形 p>
svg {background-color：red;}/ pre>< svg width =100pxheight =200pxviewBox =0 0 100 150 > < circle fill =whitestroke =blackcx =50cy =75r =50>< / circle> < polygon stroke =grayfill =yellowpoints =100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0/>< / svg>
或css
$ b b
它在照明上只是 :: before 和 :: after 元素。
drop-shadow 。
body {background-color：red;}。container {-webkit-filter：drop-shadow（2px 2px 0px grey）;} 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;转化起点：50％50％;变换：skewX（-30deg）skewY（-30deg）rotate（10deg）; background-color：yellow;}。闪电：before {position：absolute; border-style：solid; border-width：0 0 40px 30px; border-color：透明透明黄色透明; top：-39px; left：-17px; content：;}。闪电：after {position：absolute; border-style：solid; border-width：0 0 40px 30px; border-color：透明透明透明黄色; bottom：-39px;右：-17px; content：;}
< div class = circle> < div class =container> < div class =lightning>< / div> < / div>< / div>
I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the T-shirt worn by Big Bang Theory's Sheldon Cooper) in CSS.
This is going to act like a star rating system, only a 'lightning rating system' instead.
However, since I'm trying to keep the HTML to a minimum, I'd like to style this in CSS only.
I have got to the stage of:
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>
but do not know how to continue from here.
I've attempted using the perspective property, although I don't think I've quite got a handle on it as of yet - mainly because I'm slightly confused as to what it is doing to the :before and :after properties when it is applied to the parent.
I have chosen CSS for this as the white background and bolt colour will be changing on click, and because I know how to do that with CSS.
(I know SVG may be a better option here, but I have not been able to learn this due to time restrictions, so I'd prefer to use 'what I know how to use', which is, CSS)
SVG
Here you go @Professor.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>
or css
Its just ::before and ::after elements on the lighting.
drop-shadow on the lighting container.
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>
这篇关于创建闪电设计（如Flash）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
