创建闪电设计(如Flash)
jbu*_*483 69 html css svg css3 css-shapes
我试图在CSS中重新制作闪电符号(DC Comics)(或Big Bang Theory的Sheldon Cooper 所穿的T恤).
这将像星级评级系统,只是一个"闪电评级系统".
但是,因为我试图将HTML保持在最低限度,所以我只想在CSS中设置这个样式.
我到了以下阶段:
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>但不知道如何从这里继续.
我试图使用该perspective属性,虽然我认为我还没有完全掌握它 - 主要是因为当它应用于它时,我对它:before和:after属性的作用有点困惑.家长.
我为此选择了CSS,因为白色背景和螺栓颜色会随着点击而改变,因为我知道如何用CSS做到这一点.
(我知道SVG可能是一个更好的选择,但由于时间限制我无法学习这个,所以我更喜欢使用'我知道如何使用',即CSS)
Per*_*ijn 96
SVG
你去@ Professor.CSS.@ jbutler483
圆形
和多边形
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>或者css
它的正义::before和::after灯光元素.
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>- @tommydevs我不太了解CSS.我知道如何以创造性的方式使用我知道的小东西. (25认同)
- 这是天才.你怎么这么好地学习CSS. (15认同)
- 在语义,兼容性和健壮性方面,第一种解决方案是好的,第二种解决方案是坏的. (3认同)
- 第二种解决方案在某些浏览器上非常糟糕,比如平板电脑的Chrome. (2认同)
mis*_*Sam 51
免责声明:将SVG用于复杂图像.我们仍然可以使用CSS获得一些乐趣,但只是将它用于学习而不是生产实现.
这可能是单个HTML元素吗？
是啊!......有限制 - 主要是没有边框...但是,嘿,最小的HTML!
- 顶部和底部都与创建透明三角边境招上
:before和:after - 中间的螺栓用的
box-shadow是:before
非常粗略的例子
注意:此示例使用a <div>,因为它需要伪元素子元素.
body {
background: #F00;
}
div {
height: 300px;
width: 300px;
background: #FFF;
border-radius: 50%;
border: solid 5px #000;
margin-top: 200px;
position: relative;
}
div:before,
div:after {
content: '';
position: absolute;
transform: skewY(-30deg) rotate(20deg);
}
div:before {
border-right: solid 70px yellow;
border-top: solid 160px transparent;
box-shadow: 50px 100px yellow;
left: 50%;
margin-left: -50px;
top: -70px;
}
div:after {
border-right: solid 70px transparent;
border-top: solid 160px yellow;
bottom: -30px;
left: 100px;
}<div></div>- @Paul*元素,不是1个html, (11认同)
- 只有1个html,这是自动赢:) (2认同)
Har*_*rry 41
免责声明:我建议使用SVG,但这并不意味着我们不应该玩CSS.使用它来学习而不是生产实施.
这是一种只用一个元素(+几个伪)和一些背景来实现形状的方法linear-gradients.形状可以缩放而不会有任何变形.
关于如何实现形状的说明:
- 带有黑色边框的白色圆圈是使用
border-radius伪元素(:after)创建的普通CSS圆圈. - 添加了另一个伪元素(
:before)并沿X轴和Y轴倾斜,使螺栓部分呈现偏斜外观. - 实际上,螺栓是通过将多个堆叠
linear-gradients在一起而形成的.它涉及6个梯度图像,其中3个用于螺栓的内部黄色部分,另外3个用于灰色边界. - 背景图像(梯度)的大小由螺栓的尺寸决定,并且它们中的每一个都以这样的方式定位,即它们产生闪电般的外观.
- 螺栓的中心部分实际上只有一种纯色,但仍然使用渐变生成,因为我们无法控制纯色背景的大小.
注意:如果transform: scale(...)使用缩放代替高度/宽度更改+转换,则缩放效果非常好.
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
margin: 50px auto;
}
.lightning:after,
.lightning:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover {
transform: scale(1.5);
}<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>使用Bolt动画:
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
margin: 50px auto;
}
.lightning:after, .lightning:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover:before {
animation: boltstrike 1s;
}
@-webkit-keyframes boltstrike {
25% {
transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
}
50% {
transform: translateX(7.5%) translateY(-7.5%) skewY(-30deg) skewX(-30deg);
}
100% {
transform: skewY(-30deg) skewX(-30deg);
}
}
@keyframes boltstrike {
25% {
transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
}
50% {
transform: translateX(5%) translateY(-5%) skewY(-30deg) skewX(-30deg);
}
100% {
transform: skewY(-30deg) skewX(-30deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>单击此处查看包含动画,点击颜色变化等的完整演示.
没有边框的旧版本:
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
}
.lightning:after,
.lightning:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 50%, transparent 50%), linear-gradient(to top left, transparent 50%, yellow 50%);
background-size: 20% 40%, 20% 40%, 20% 40%;
background-position: 50% 50%, 30% 5%, 70% 100%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover {
height: 250px;
width: 250px;
}<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>- 非常聪明的背景属性调整! (4认同)
- 好的免责声明Harry (2认同)
Ste*_*ide 16
管理使用CSS偏斜完成此操作并旋转一些定位.
它不是最干净的,也不是很好的响应性或改变大小但它的工作和它尽可能接近我可以得到我短暂的时间.
代码如下:
#lightning {
position: relative;
height: 1000px;
width: 600px;
background: red;
}
.above,
.below {
height: 100%;
width: 100%;
position: absolute;
top: 100px;
}
.above .middle {
background: yellow;
position: absolute;
top: 300px;
left: 100px;
height: 125px;
width: 400px;
-webkit-transform: rotate(111deg) skew(35deg);
transform: rotate(111deg) skew(35deg);
}
.above .toptri {
position: absolute;
height: 200px;
width: 0px;
padding: 0px;
top: -175px;
left: 300px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 50px solid transparent;
border-right: 128px solid transparent;
border-bottom: 284px solid #FFFF00;
-webkit-transform: rotate(350deg) skew(141deg);
transform: rotate(350deg) skew(141deg);
}
.above .bottri {
position: absolute;
height: 200px;
width: 0px;
padding: 0px;
top: 400px;
left: 125px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 50px solid transparent;
border-right: 128px solid transparent;
border-bottom: 284px solid #FFFF00;
-webkit-transform: rotate(170deg) skew(141deg);
transform: rotate(170deg) skew(141deg);
}
.below .middle {
background: grey;
position: absolute;
top: 280px;
left: 80px;
height: 165px;
width: 440px;
-webkit-transform: rotate(111deg) skew(35deg);
transform: rotate(111deg) skew(35deg);
}
.below .toptri {
position: absolute;
height: 160px;
width: 0px;
padding: 0px;
top: -200px;
left: 265px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 80px solid transparent;
border-right: 158px solid transparent;
border-bottom: 370px solid grey;
-webkit-transform: rotate(350deg) skew(141deg);
transform: rotate(350deg) skew(141deg);
}
.below .bottri {
position: absolute;
height: 200px;
width: 0px;
padding: 0px;
top: 400px;
left: 125px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 50px solid transparent;
border-right: 128px solid transparent;
border-bottom: 284px solid #FFFF00;
-webkit-transform: rotate(170deg) skew(141deg);
transform: rotate(170deg) skew(141deg);
}
.below .bottri {
position: absolute;
height: 160px;
width: 0px;
padding: 0px;
top: 380px;
left: 100px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 80px solid transparent;
border-right: 158px solid transparent;
border-bottom: 370px solid grey;
-webkit-transform: rotate(170deg) skew(141deg);
transform: rotate(170deg) skew(141deg);
}<div id="lightning">
<div class="below">
<div class="toptri"></div>
<div class="middle"></div>
<div class="bottri"></div>
</div>
<div class="above">
<div class="toptri"></div>
<div class="middle"></div>
<div class="bottri"></div>
</div>
</div>Hid*_*bes 14
CSS
CSS只使用:before和:after伪元素,CSS三角形和transform.考虑到CSS三角形的使用,很难使这个特定的解决方案响应,因为borders不能基于百分比.该解决方案使用两个divs作为闪电的基础和它的轮廓.
螺栓按以下方式创建:
- 螺栓的中间部分在
.boltOuter/中指定.boltInner.它是一个在X和Y轴上倾斜的矩形,使其成为倾斜的菱形 - 的"尖头"是
:before和:after相对定位到容器伪构件.boltOuter/.boltInner - "prongs"是使用CSS三角形(零
height和width具有选择性borders的元素)制作的.旋转三角形以获得所需的角度 - 所有元素
.boltInner都变得更小并且偏离.boltOuter以允许.boltOuter充当银色轮廓
body {
background-color: red;
}
.circle {
background-color: white;
border: 5px solid black;
border-radius: 50%;
height: 400px;
left: 100px;
position: relative;
top: 200px;
width: 400px;
}
.boltOuter, .boltInner {
position: absolute;
}
.boltOuter:before, .boltOuter:after, .boltInner:before, .boltInner:after {
content: "";
display: block;
height: 0;
position: absolute;
transform: rotateY(-60deg);
width: 0;
}
.boltOuter {
background-color: silver;
height: 300px;
left: 140px;
top: 50px;
transform: skewX(-10deg) skewY(-20deg);
width: 110px;
z-index: 2;
}
.boltOuter:before, .boltOuter:after {
border: 150px solid transparent;
z-index: 1;
}
.boltOuter:before {
border-bottom-color: silver;
border-right-color: silver;
left: -150px;
top: -200px;
}
.boltOuter:after {
border-left-color: silver;
border-top-color: silver;
bottom: -200px;
right: -150px;
}
.boltInner {
background-color: gold;
height: 290px;
left: 5px;
top: 5px;
width: 100px;
z-index: 4;
}
.boltInner:before, .boltInner:after {
border: 140px solid transparent;
z-index: 3;
}
.boltInner:before {
border-bottom-color: gold;
border-right-color: gold;
left: -143px;
top: -190px;
}
.boltInner:after {
border-top-color: gold;
border-left-color: gold;
bottom: -190px;
right: -143px;
}<div class="circle">
<div class="boltOuter">
<div class="boltInner"></div>
</div>
</div>JS小提琴: https ://jsfiddle.net/o7gm6dsb/
- 不得不说我还是比你更喜欢你的这个答案:) (2认同)
Hid*_*bes 11
一种不同的CSS方法,可以用单个方法获得结果div.
此方法使用通过使用http://fontello.com/生成的自定义图标字体,这样做的好处是字体可以轻松扩展,只需要很少的工作量或代码.
- 使用包含的字体
@font-face.在此示例中,字体直接嵌入到CSS文件中 .bolt用于通过使用绘制包含圆border-radius: 50%;- 所述
:before伪元件用于螺栓,相对定位.bolt和定心,以允许它的圆边界之外去 - 在较新的webkit
-webkit-text-stroke: 3px silver;中,可以使用浏览器为螺栓提供轮廓 - 如果
-webkit-text-stroke不支持text-shadow可以用来提供临时边框
@font-face {
font-family: 'fontello';
src: url('data:application/octet-stream;base64,d09GRgABAAAAAAokAA4AAAAAElgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPihIKGNtYXAAAAGIAAAAOAAAAUrQERm3Y3Z0IAAAAcAAAAAKAAAACgAAAABmcGdtAAABzAAABZQAAAtwiJCQWWdhc3AAAAdgAAAACAAAAAgAAAAQZ2x5ZgAAB2gAAAA6AAAAOgzIsFJoZWFkAAAHpAAAADQAAAA2A7+LyGhoZWEAAAfYAAAAHgAAACQFIgNVaG10eAAAB/gAAAAIAAAACAVcAABsb2NhAAAIAAAAAAYAAAAGAB0AAG1heHAAAAgIAAAAIAAAACAAjwuMbmFtZQAACCgAAAF3AAACzcydGx1wb3N0AAAJoAAAABsAAAAtcHx4YnByZXAAAAm8AAAAZQAAAHvdawOFeJxjYGRaxziBgZWBg6mKaQ8DA0MPhGZ8wGDIyMTAwMTAysyAFQSkuaYwOLxgeMHAHPQ/iyGK2ZZhGlCYESQHAPi9C814nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGF4w/P8PUgChJRih6oGAkY1hxAMAY8cGrgAAAAAAAAAAAAAAAHicrVZpcxNHEJ3VYcs2PoIPEjaBWcZyjHZWmMsIEMbsShbgHPKV7EKOXUt27otP/Ab9ml6RVJFv/LS8Hh3YYCdVVChK/ab37Uz3655ek9CSxF5Yj6TcfCmmtjZpZOdJSDdsWo7iQ9nZCylTTP4uiIJotdS+7TgkIhKBqnWFJYLY98jSJONDjzJatiW9alJu6Ul32RoP6q369tPQUY7dCSU1m6FD65EtqcKoEkUy7ZGSNi3D1V9JWuHnK8x81QwlgugkksabYQyP5GfjjFYZrcZ2HEWRTZYbRYpEMzyIIo+yWmKfXDFBQPmgGVJe+TSifIQfkRV7lNMKccl2mt/3JT/pHc6/JOJ6i7IlB/5AdmQHe6cr+SLS2grjpp1sR6GK8HR9J8Qjm5Pqn+xRXtNo4HZFpifNCJbKV5BY+Qll9g/JauF8ypc8GtWSg5wIWi9zYl/yDrQeR0yJaybIgu6OToig7pecodhj+rj4471dLBchBMg4lvWOSrgQRilhs5okbQQ5iJKyRZXUekdMnPI6LeItYb9O7ehLZ7RJqDsxnq2Hjq2cqOR4NKnTTKZO7aTm0ZQGUUo6Ezzm1wGUH9Ekr7axmsTKo2lsM2MkkVCghXNpKohlJ5Y0BdE8mtGbu2Gaa9eiRZo8UM89ek9vboWbOz2n7cA/a/xndSqmg70wnZ4OyEp8mna5SdG6fnqGfybxQ9YCKpEtNsOUxUO2fgfl5WNLjsJrA2z3nvMr6H32RMikgfgb8B4v1SkFTIWYVVAL3bTWtSzL1GpWi1Rk6rshTStf1mkCTTkOfWNfxjj+r5kZS0wJ3+/E6dkRl5659iXINIfcZl2P5nVqsV2AzmzP6TTL9n2d5th+oNM82/M6HWFr63SU7Yc6LbD9SKdjbC9oQZPuOwRyEYFcwAYSgbB1EAjbSwiErUIgbBcRCNsiAmG7hEDYfoxA2C4jELaXtayafippHDsTywBFiAOjOe7IZW4qV1PJpRKui0anNuQpcqukonhW/SsD/eKRN6yBtUC6RNb8ikmufFSV44+uaHnTxLkCjlV/e3NcnxMPZb9Y+FPwv9qaqqRXrHlkchV5I9CT40TXJhWPrunyuapH1/+Lig5rgX4DpRALRVmWDb6ZkPBRp9NQDVzlEDMbMw/X9bplzc/h/JsYIQvofvw3FBoL3INOWUlZ7WCv1dePZbm3B+WwJ1iSYr7M61vhi4zMSvtFZil7PvJ5wBUwKpVhqw1creDNexLzkOlN8kwQtxVlg6SNx5kgsYFjHjBvvpMgJExdtYHaKZywgbxgzCnY74RDVG+U5XB7oX0ejZR/a1fsyBkVTRD4bfZG2OuzUPJbrIGEJ7/U10BVIU3FuKmASyPlhmrwYVyt20YyTqCvqNgNy7KKDx9H3HdKjmUg+UgRq0dHP629Qp3Uuf3KKG7fO/0IgkFpYv72vpnioJR3tZJlVm0DU7calVPXmsPFqw7dzaPue8fZJ3LWNN10T9z0vqZVt4ODuVkQ7dsclKVMLqjrww4bqMvNpdDqZVyS3nYPMCwwoN+hFRv/V/dx+DxXqgqj40i9nagfo89iDPIPOH9H9QXo5zFMuYaU53uXE59u3MPZMl3FXayf4t/ArLXmZukacEPTDZiHrFodusoNfKcGOj3S3I70EPCx7grxAGATwGLwie5axvMpgPF8xhwf4HPmMGgyh8EWcxhsM2cNYIc5DHaZw2CPOQy+YM46wJfMYRAyh0HEHAZPmBMAPGUOg6+Yw+Br5jD4hjn3Ab5lDoOYOQwS5jDY13RrKHOLF3QXqG1QFejA9BMW97A41FQZsr/jhWF/bxCzfzCIqT9quj2k/sQLQ/3ZIKb+YhBTf9V0Z0j9jReG+rtBTP3DIKY+0y/GcpnBX0a+S4UDyi42n/P3xPsHwhpAtgABAAH//wAPAAEAAP9qAXQDPQAJAAazBgEBLSsTAQM3BzcBEwc3WAEcYExgTP60hFiOAXYBx/7RK/Mg/gQBUDD0AAAAeJxjYGRgYADizOvzD8fz23xl4GZ+ARRhuDjN0gxC87MxMPzPYixhtgVyORiYQKIATD0KtHicY2BkYGAO+p/FEMX8ggEIGEsYGBlQARMAXbADfQAAA+gAAAF0AAAAAAAAAB0AAAABAAAAAgAKAAEAAAAAAAIAAAAQAHMAAAAYC3AAAAAAeJx1kc1Kw0AURr9pa9UWVBTceldSEdMf6EYQCpW60U2RbiWNaZKSZspkWuhr+A4+jC/hs/g1nYq0mJDMuWfu3LmZADjHNxQ2V5fPhhWOGG24hEM8OC7TPzqukJ8dH6COV8dV+jfHNdwiclzHBT5YQVWOGU3x6VjhTJ06LuFEXTku0985rpAfHB/gUr04rtIHjmsYqdxxHdfqq6/nK5NEsZVG/0Y6rXZXxivRVEnmp+IvbKxNLj2Z6MyGaaq9QM+2PAyjReqbbbgdR6HJE51J22tt1VOYhca34fu6er6MOtZOZGL0TAYuQ+ZGT8PAerG18/tm8+9+6ENjjhUMEh5VDAtBg/aGYwcttPkjBGNmCDM3WQky+EhpfCy4Ii5mcsY9PhNGGW3IjJTsIeB7tueHpIjrU1Yxe7O78Yi03iMpvLAvj93tZj2RsiLTL+z7b+85ltytQ2u5at2lKboSDHZqCM9jPTelCei94lQs7T2avP/5vh/gZIRNAHicY2BigAAuBuwAKM/IxJKUn1PCwAAACb0BxwB4nGPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGVidNjIwaEFoDhR6JwMDAycyi5nBZaMKY0dgxAaHjoiNzCkuG9VAvF0cDQyMLA4dySERICWRQLCRgUdrB+P/1g0svRuZGFwAB9MiuAAAAA==') format('woff'),
url('data:application/octet-stream;base64,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') format('truetype');
}
body {
background-color: red;
}
.bolt {
background-color: white;
border: 5px solid black;
border-radius: 50%;
height: 100px;
margin: 50px;
position: relative;
text-align: center;
width: 100px;
}
.bolt:before {
-webkit-text-stroke: 3px silver;
color: gold;
content: '\e800';
display: block;
font-family: "fontello";
font-size: 200px;
line-height: 100px;
position: absolute;
text-shadow: 2px 0 0 silver, -2px 0 0 silver, 0 2px 0 silver, 0 -2px 0 silver, 1px 1px silver, -1px -1px 0 silver, 1px -1px 0 silver, -1px 1px 0 silver;
width: 100%;
}<div class="bolt"></div>您可以使用html符号实现略有不同的灯光螺栓.请注意,并非所有浏览器都支持所有浏览器.
这是一个简单的例子,你可以用css/html做什么.
.circle {
border-radius: 50%;
border: 4px solid black;
width: 100px;
height: 100px;
font-size: 70px;
text-align: center;
display: table-cell;
vertical-align: middle;
background: white;
}
.square{
border: 4px solid red;
width: 106px;
height: 106px;
background: red;
}<div class="square">
<div class="circle">?</div>
</div>这个的优点是这很简单,不需要任何东西.缺点是螺栓略有不同,并非所有浏览器都支持该符号.
如果您需要精确图片,请在SVG中生成并添加为svg或字体.
可悲的是,看起来这个标志在Windows上看不到,但在macos(chrome)上它看起来像这样:
在ubuntu上它也可见,但看起来不同.