创建闪电设计(如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屋!