主页 / 问题 / 645144
Accepted
Alexandr_TT
Asked:2020-03-28 17:33:33 +0000 UTC2020-03-28 17:33:33 +0000 UTC

创建闪电设计

  • 772

我正在尝试在 CSS 中重现“闪电侠（DC 漫画）”中的闪电符号（或“生活大爆炸”中 Sheldon Cooper 穿的 T 恤上的徽章）。

在此处输入图像描述

该符号将像星级评定系统一样工作，但它将是一个“闪电评定系统”。

但是，由于我试图将 HTML 保持在最低限度，我希望它主要是 CSS 样式。

下面是我的代码示例： 

 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>

但我不知道如何从这里继续。
我尝试使用 property perspective，虽然我不知道到目前为止我是否已经对该属性进行了处理 - 主要是因为我对它perspective对属性的作用:before以及:after它们何时应用于父元素有点困惑。

我为此选择了 CSS，因为白色背景和闪电颜色会在点击时发生变化，还因为我知道如何使用 CSS 来实现。

我知道 SVG 可能是这里的最佳选择，但由于时间限制我无法学习 SVG，所以我宁愿使用“我知道如何使用的东西”，即 CSS。

问题翻译：Create a lightning bolt design (like The Flash) @jbutler483

html

3 个回答

  1. Best Answer

    这绝对svg是一个 100% 的解决方案，但我也会提供我的弯曲 css 选项）：

    * {
  box-sizing: border-box;
}

html,
body,
.wrap {
  margin: 0;
  width: 100%;
  height: 100%;
}

.wrap {
/*   display: flex;
  align-items: center;
  align-content: center;
  justify-content: center; */
  
  max-width: 500px;
  width: 100%;
  margin: 2rem auto;
}

.z {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.lg {
  position: absolute;
  transform: skewX(-50deg) rotate(-40deg) translate(-78%, -82%);
  z-index: 2;
  top: 50%;
  left: 50%;
}

.lightning-border{
  background: #d4c6cb;  
  width: 42px;
  height: 130px; 
  left: 50.5%;
}

.lightning{
  background: #fbe028;
  width: 35px;
  height: 120px;
}

.lg:before,
.lg:after {
  content: '';
  position: absolute;
}

.lightning:before {
  top: -130px;
  left: -20px;
  border-bottom: 150px solid #fbe028;
  border-left: 30px solid transparent;
  border-right: 10px solid transparent;
}

.lightning:after {
  top: 90px;
  left: 15px;
  border-top: 150px solid #fbe028;
  border-left: 10px solid transparent;
  border-right: 30px solid transparent;
}

.lightning-border:before {
  top: -140px;
  left: -24px;
  border-bottom: 172px solid #d4c6cb;
  border-left: 38px solid transparent;
  border-right: 16px solid transparent;
}

.lightning-border:after {
  top: 88px;
  left: 14px;
  border-top: 172px solid #d4c6cb;
  border-left: 16px solid transparent;
  border-right: 38px solid transparent;
}

.circle {
  width: 180px;
  height: 180px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  margin: -90px 0 0 -90px;
}

body {
  background: #e63737;
}
    <div class="wrap">
  <div class="z">
    <div class="lg lightning-border"></div>
    <div class="lg lightning"></div>

    <div class="circle"></div>
  </div>
</div>

    代码笔

    PS： Ba⚡⚡⚡⚡⚡inga！;)

    • 14

  2. 在这里您可以找到有关 SVG 的信息：

    圆形
    多边形

    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>

    答案翻译：创建闪电设计@Persijn

    • 11

  3. 免责声明：为此我推荐 SVG，但这并不意味着我们不应该享受 CSS。将其用于学习，而不是用于实施。

    这是一种获取仅包含一个元素的表单的方法，外加几个伪元素和一些background linear-gradients. 形状可以适应而不会变形。

    表格获取方式说明：

    • 带有黑色边框的白色圆圈是border-radius使用:after.

    • 添加了另一个伪元素 - :before，它沿两个轴扭曲X并Y赋予闪电部分所需的外观。

    • 闪电实际上是通过将多个线性
      渐变叠加在一起创建的。它包括 6 个渐变
      图像，其中 3 个用于拉链的内部黄色部分，另外 3 个用于灰色边框。

    • 背景图像（渐变）的大小由闪电的大小决定，并且它们中的每一个都被定位以便它们绘制与其外观相似的闪电。

    • 拉链的中心部分实际上只有一种纯色，但仍然使用渐变渲染，因为我们无法控制背景纯色的大小。 

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

    闪电动画示例： 

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

    链接到демо带有动画和颜色变化的全屏。

    答案翻译：创建闪电设计（如 The Flash） @Harry

    • 8

相关问题