logo标签列表

如何在使用CSS创建的链中集成多个锁图标？

htmlcsssvgcss-shapes
3

我正在使用CSS创建以下链条。如您所见，我还使用SVG创建了一个挂锁。我的目标是直接将多个此类锁添加到链条中：

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  display: grid;
}

body {
  min-height: 100vh;
  display: grid;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ffffff;
}

.chain {
  position: absolute;
}

.link {
  display: inline-block;
  width: 2rem;
  height: 3rem;
  border-radius: 1rem;
  background: #ff8e50;
  background-image: -webkit-gradient( linear, left top, left bottom, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient( top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient( top, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient( to bottom, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}

.link:nth-child(2n + 1):before {
  position: absolute;
  content: "";
  top: 0.5rem;
  left: 0.5rem;
  width: 1rem;
  height: 2rem;
  border-radius: inherit;
  background: #ffffff;
}

.links.left .link {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-90deg);
}

.links.left .link:nth-child(2n),
.links.right .link:nth-child(2n) {
  z-index: 1;
  width: 0.5rem;
  height: 2rem;
  position: relative;
  top: -7px;
  background: #ff8e50;
  background-image: -webkit-gradient( linear, left top, right top, from(#f8be5b), color-stop(35%, #fef1c9), color-stop(65%, #e69539), to(#f7f2a0));
  background-image: -webkit-linear-gradient( left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: -o-linear-gradient( left, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
  background-image: linear-gradient( to right, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}


/* Lock */

.shackle {
  stroke: #000;
  transform-origin: right;
  transition: all .3s ease;
  transform: translateY(0%);
}

svg {
  width: 100px;
  perspective: 1000px;
  &.unlock {
    .shackle {
      transform: translateY(-20%);
    }
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M64,234.667h384V512H64V234.667z"/>
<path class="shackle" fill="none" stroke="#FFFFFF" stroke-width="60" stroke-miterlimit="10" d="M362.666,436.5V128
 c0-58.901-47.766-106.667-106.666-106.667c-58.901,0-106.667,47.765-106.667,106.667v128"/>
</svg>

<div class="container">
  <div class="swag">
    <div class="chain">
      <div class="links left">
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
      </div>
    </div>
  </div>
</div>

请看下面我的最终结果应该是什么样子：

enter image description here

以上显示显示了在每个链条元素上添加的锁。
有任何建议吗？
感谢您的回复！
1
有趣，我会尝试一下 ;) - Temani Afif
你可能正在使用SCSS，我猜测，在纯CSS中无法嵌套CSS规则。 - Deepak Kamat
你到底想做什么事情是你还没有完成的？你已经有了这个链条。你在某些链接上放了锁。我不明白你所要求的区别。 - Stephen R
我误解了问题。基于“上面的显示显示了锁添加到每个链元素中。有什么建议如何做到这一点？”，我认为他只是想将图像添加到所有链接中。请参阅我的新答案，以使用SVG直接而无需所有CSS的方法。 - Stephen R
无法工作 https://ibb.co/1MYHXFL - MaximLensky
2个回答
4

这里有一个不使用svg，只用CSS的想法（我还简化了一些你的代码）。

我使用radial/linear-gradient来创建锁。

图片描述

只需将锁插入需要显示它的链接中即可。

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  display: grid;
}

.link {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 2rem;
  border-radius: 1rem;
  background: 
    linear-gradient( to right, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}

.link:before {
  position: absolute;
  content: "";
  top: calc(50% - 0.5rem);
  left: calc(50% - 1rem);
  width: 2rem;
  height: 1rem;
  border-radius: inherit;
  background: #ffffff;
}

.link:after {
  position: absolute;
  z-index: 2;
  content: "";
  width: 2rem;
  height: 0.5rem;
  top: calc(50% - 0.25rem);
  right: -1rem;
  border-radius: 1rem;
  background-image: linear-gradient( to bottom, #f8be5b 0%, #fef1c9 35%, #e69539 65%, #f7f2a0 100%);
}

.lock {
  position: absolute;
  z-index:9;
  width: 2rem;
  height: 1.5rem;
  background: #000;
  top: calc(100% + 0.25rem);
  margin-left: 0.75rem;
}

.lock:before {
    content: "";
    position: absolute;
    height: 1.5rem;
    width: 1.5rem;
    bottom: 97%;
    border-radius: 100% 100% 0 0;
    margin-left: 0.25rem;
    background: 
    radial-gradient(circle at bottom, transparent 12%, #000 13%) 0 -37px/100% 200% no-repeat,
    linear-gradient(to right,transparent 77%,#000 0),
    linear-gradient(to right,#000 23%,transparent 0) 0px 19px/100% 100% no-repeat;
}
<div class="container">
  <div class="swag">
    <div class="chain">
      <div class="links left">
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link">
          <div class="lock"></div>
        </div>
        <div class="link"></div>
      </div>
    </div>
  </div>
</div>

2
使用复杂的CSS来创建图像对我来说似乎过于花哨了。特别是当SVG图像易于重用时，更加复杂而不实用。 - Stephen R
我喜欢你的答案，但为什么对我不起作用？https://ibb.co/1MYHXFL - MaximLensky
-2

更新：如评论中所述，使用CSS矢量绘制图像往往会使事情变得过于复杂；这个问题是一个很好的例子。如果对于链环和锁都使用SVG，那么这就变得非常简单了。（超出了少数绘图程序导出到CSS“图形”的事实。它更像是一种噱头而不是日常有用的方法。）

目前，@Termani的回答有效。https://dev59.com/AKjka4cB1Zd3GeqPGfPU#48721640

一个更完整的答案将涉及到将CSS链环替换为SVG（例如https://pixabay.com/en/chain-metal-chain-links-link-146909/），然后使用<symbol> 和 <use>元素来处理链和锁。

原始答案：

在SVG中添加一个带有id属性的
代码未经测试，但应该可以工作。所以测试一下，看看它是否不起作用 :) 我知道 SVG 应该用于绘制事物而不是 CSS... 所以让它与 SVG 一起工作 ;) 这样我们就可以比较复杂度了。然后我们将有两个选择和两个不同的答案，然后 OP 将选择合适的一个 :) 但在所有情况下，拥有两种选择都是好的。 - Temani Afif
一个关于为什么 CSS 作为图像通常是一个不好的想法的好案例。链环 “图像” 的复杂 CSS 对 SVG 造成了重大干扰 (特别是类似于90度旋转的东西)。如果链环都是SVG，那么这将非常简单。(注意: 以上 SVG 元素的更正 -- 当使用 symbol 时，一些属性会放在 symbol 而不是 svg 中。) - Stephen R
好的， OP提供了一个90％的CSS解决方案，他想添加10％的SVG，因此在这种情况下，我认为最好继续使用CSS来完成这10％。 而且在这种特定情况下这是很好的。现在如果我们一般性地讨论，当然SVG的创建是为了使我们更轻松地创建不同的形状，没有人能说这是错误的，所以为什么不添加一个可用的答案，展示您纯SVG解决方案，而不仅仅是说CSS不好而SVG好:) ... 另外，您可能会注意到，我改进了他的CSS代码，删除了许多不必要的东西。 - Temani Afif
通过这么做，OP 不仅会得到解决方案，还将学习使用线性渐变、径向渐变等新技术，如何使用多个渐变，如何使用伪元素删除不必要的代码并改善标记等等。 - Temani Afif
你说得对。我尽可能快速地更新了，但老实说今天是周六，我还有一条车道要铲雪。;-) 我会看看能否稍后展示一下我的糟糕的图形设计技能。（你会注意到我取消了对你回复的踩赞....） - Stephen R
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接