将多个元素添加到css

时间：2018-02-10 13:01:09

标签： html css css3 svg css-shapes

我在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

上面的显示屏显示了锁定添加到每个链元素。

有任何建议怎么做？

感谢您的回复！

2 个答案:

答案 0 :(得分：2)

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

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

enter image description here

只需将锁插入需要显示的链接内。

* {
  -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;
}

.link {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 2rem;
  border-radius: 1rem;
  background: #ff8e50;
  background-image: 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;
  background: #ff8e50;
  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;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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>

答案 1 :(得分：-2)

更新：正如评论中所提到的，使用CSS矢量绘制图像有一种快速过度复杂化的趋势;这个问题就是一个很好的例子。如果对链链接和锁使用SVG，这变得非常简单。 （“复杂”超出了很少的绘图程序导出到CSS“图形”的简单事实。它比日常有用的方法更噱头。）

按原样，@ Termani的答案有效。 https://stackoverflow.com/a/48721640/339440

更完整的答案将涉及交换SVG的CSS链接（例如https://pixabay.com/en/chain-metal-chain-links-link-146909/），然后使用<symbol>和<use>元素进行链和锁定。

原始答案：

在SVG中添加带有id属性的<symbol>标记，以标记您正在重复使用的图片。然后，在您的特定链接中，您可以添加带有<svg>标记的<use>代码来引用该图片。 （代码未经过测试，但应该有效）

<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" xml:space="preserve">
    <symbol id="padlock" width="20px" height="20px" viewBox="0 0 512 512">
        <path d="M64,234.667h384V512H64V234.667z"/>
        <path class="shackle" fill="none" stroke="#000000" 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"/>
    </symbol>
</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"><svg><use xlink:href="#padlock"></use></svg></div>
        <div class="link"><svg><use xlink:href="#padlock"></use></svg></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"><svg><use xlink:href="#padlock"></use></svg></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>
相关问题
最新问题