究竟是什么标识了网站访问者？

Question

Alexandr_TT

Asked:2020-03-28 17:33:33 +0000 UTC2020-03-28 17:33:33 +0000 UTC 2020-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

3 个回答

Voted

HamSter · Answer 1 · 2020-03-28T18:07:26Z

这绝对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！;)

Alexandr_TT · Answer 2 · 2020-03-28T17:33:33Z

在这里您可以找到有关 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

Alexandr_TT · Answer 3 · 2020-03-28T17:54:34Z

免责声明：为此我推荐 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

创建闪电设计

CSS 解决方案

Python 3.6 - 安装 MySQL (Windows)

C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

返回指针的函数

我使用 django 管理面板添加图像，但它没有显示

这些条目是什么意思，它们的完整等效项是什么样的

浏览器仍然缓存文件数据

在 Excel VBA 中激活工作表的问题

为什么内置类型中包含复数而小数不包含？

获得唯一途径

告诉我一个像幻灯片一样创建滚动的库

创建闪电设计

3 个回答

CSS 解决方案

相关问题