我正在使用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>
有任何建议吗?
感谢您的回复!