创build闪电devise（如Flash）

带有Flash符号的T恤杉

我正尝试在CSS中重新创buildFlash（DC漫画）（或者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="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属性时它适用于父母。

我已经select了CSS作为白色的背景和螺栓的颜色会改变点击，因为我知道如何做到这一点与CSS。

（我知道SVG在这里可能是一个更好的select，但是由于时间的限制，我还没有能够学习，所以我宁愿使用'我知道如何使用'，也就是CSS）

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>

免责声明：使用SVG复杂的图像。 不过，我们仍然可以用CSS获得一些乐趣，只是将其用于学习而不是生产实现。

这是可能的一个单一的HTML元素？

是啊！ …有限制 – 主要没有边界螺栓…但是，嘿，最小的HTML！

  • 顶部和底部部分是在透明边框三angular形技巧上创build的:before和:after
  • 中间的螺栓是用:before的box-shadow创build的

非常粗略的例子

注意：这个例子使用了一个<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>

免责声明：我build议这些SVG，但这并不意味着我们不应该有与CSS的乐趣。 使用这个来学习，而不是生产实现。

这里是一个方法来实现一个单一的元素（+几个pseudos）和一些背景linear-gradients的形状。 形状可以缩放而不会变形。

关于如何达到形状的说明：

  • 带黑色边框的白色圆圈是在伪元素（ :after ）上使用border-radius创build的普通CSS圆圈。
  • 另一个伪元素（ :before ）被添加并沿着X轴和Y轴倾斜，以使螺栓的部分呈现倾斜的外观。
  • 螺栓实际上是通过将多个linear-gradients叠加在一起而创build的。 它涉及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="ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="lightning"></div>

pipe理完成这个使用CSS skews和一些定位旋转。

它不是最干净的，它也不是很好的反应能力或改变的大小，但它的工作和尽可能接近我用我的时间很短的时间。

代码如下： 

 #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>

CSS

CSS只使用:before和:after伪元素，CSS三angular形和transform 。 考虑到CSS三angular形的使用，使得这个特定的解决scheme很难响应，因为border s不能以百分比为基础。 该解决scheme使用两个div作为闪电的基础，并概述了它。

螺栓是按照以下方式创build的：

  • 螺栓的中部在.boltOuter / .boltInner指定。 这是一个矩形偏斜在X和Y轴上，使其成为一个倾斜的菱形
  • “prongs”是:before和:after伪元素相对于容器的位置.boltOuter / .boltInner
  • “叉”是使用CSS三angular形（具有select性border s的零height和width元素）制成的。 三angular形旋转得到所需的angular度
  • .boltInner所有元素都变小了，并且从.boltOuter偏移来允许.boltOuter充当silverlight轮廓 
 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>

一个不同的CSS方法，可以用一个div来获得结果。

此方法使用通过使用http://fontello.com/生成的自定义图标字体，这样做的好处是字体可以轻松地进行扩展，而不需要任何代码。;

  • 字体包含在@font-face 。 在这个例子中，字体直接embedded到CSS文件中
  • .bolt用于通过使用border-radius: 50%;来绘制包含的圆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,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') format('woff'), url('data:application/octet-stream;base64,AAEAAAAOAIAAAwBgT1MvMj4oSCgAAADsAAAAVmNtYXDQERm3AAABRAAAAUpjdnQgAAAAAAAABmAAAAAKZnBnbYiQkFkAAAZsAAALcGdhc3AAAAAQAAAGWAAAAAhnbHlmDMiwUgAAApAAAAA6aGVhZAO/i8gAAALMAAAANmhoZWEFIgNVAAADBAAAACRobXR4BVwAAAAAAygAAAAIbG9jYQAdAAAAAAMwAAAABm1heHAAjwuMAAADOAAAACBuYW1lzJ0bHQAAA1gAAALNcG9zdHB8eGIAAAYoAAAALXByZXDdawOFAAAR3AAAAHsAAQKuAZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAANS/2oAWgM9AJYAAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAP//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA/2oBdAM9AAkABrMGAQEtKxMBAzcHNwETBzdYARxgTGBM/rSEWI4BdgHH/tEr8yD+BAFQMPQAAAAAAQAAAAEAAGnXn//wAPAAAAAAAAAAAAAAAAsAAsILAAVVhFWSAgS+LLA+Ky2wUyyyAAE+Ky2wVCyyAQA+Ky2wVSyyAQE+Ky2wViyyAABAKy2wVyyyAAFAKy2wWCyyAQBAKy2wWSyyAQFAKy2wWiyyAABDKy2wWyyyAAFDKy2wXCyyAQBDKy2wXSyyAQFDKy2wXiyyAAA/Ky2wXyyyAAE/Ky2wYCyyAQA/Ky2wYSyyAQE/Ky2wYiywNysusSsBFCstsGMssDcrsDsrLbBkLLA3K7A8Ky2wZSywABawNyuwPSstsGYssDgrLrErARQrLbBnLLA4K7A7Ky2waCywOCuwPCstsGkssDgrsD0rLbBqLLA5Ky6xKwEUKy2wayywOSuwOystsGwssDkrsDwrLbBtLLA5K7A9Ky2wbiywOisusSsBFCstsG8ssDorsDsrLbBwLLA6K7A8Ky2wcSywOiuwPSstsHIsswkEAgNFWCEbIyFZQiuwCGWwAyRQeLABFTAtAEu4AMhSWLEBAY5ZsAG5CAAIAGNwsQAFQrEAACqxAAVCsQAIKrEABUKxAAgqsQAFQrkAAAAJKrEABUK5AAAACSqxAwBEsSQBiFFYsECIWLEDZESxJgGIUVi6CIAAAQRAiGNUWLEDAERZWVlZsQAMKrgB/4WwBI2xAgBEAA==') 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，但是这很容易，而且比用css做得更快：

  • 做一个你的闪电的截图。
  • 转到： http ： //www.base64-image.de/上传图片（jpg，png，gif）。
  • 获取CSS背景图像代码

我build议使用神奇的Drawsvg网站，让你释放你的想象力，并绘制自由您的SVG对象没有任何先决条件或技能。

在这里输入图像说明

当你完成绘图时，你只需点击保存button，你就可以得到你的SVG代码，上图中示例代码： 

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="200px" viewBox="0 0 100 200" preserveAspectRatio="xMidYMid meet" > <rect id="svgEditorBackground" x="0" y="0" width="100" height="200" style="stroke: none;" fill="red"/> <circle id="e1_circle" cx="50.9398" cy="93.985" stroke="black" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="48.5487" fill="white" transform="matrix(1 0 0 1 -1.12782 4.13534)"/><g id="e4_group" fill="yellow" style=""/> <polyline stroke="black" id="e5_polyline" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" points="67.1053 21.8045 33.6466 74.812 50.188 69.5489 25 114.286 45.6767 106.767 14.8496 158.271 70.8647 92.8571 45.3008 97.7444 69.3609 56.391 50.188 62.0301 66.7293 21.8045" fill="yellow"/> </svg>
Interesting Posts

纯CSS多级下拉菜单

在CSS中使用多个@ font-face规则

如何在网页上使用苹果新旧金山字体

以“原生”大小的50％显示图像

@media媒体查询和ASP.NET MVC剃刀语法冲突

CSS特异性如何工作？

如何把表放在页面的中心使用CSS？

＆符号（＆）结束，并且是SASS中的select器的一部分

caching通过params破坏

Css高度百分比不工作