使用CSS3和SVG实现的各种苹果接线头

USB, HDMI, 串口，电源充电线（插头）等。

apple, cords

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2476
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    background-color: #4d4d4d;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
[class$='cord'] {
    padding: 2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.power-cord div {
    border: 3px solid #333;
}
.power-cord div:nth-child(1) {
    background: -webkit-linear-gradient(0deg, #ccc 5%, #999 5%, #999 95%, #666 95%);
    background: linear-gradient(90deg, #ccc 5%, #999 5%, #999 95%, #666 95%);
    border-bottom: none;
    height: 20px;
    width: 100px;
}
.power-cord div:nth-child(2) {
    background: -webkit-linear-gradient(0deg, #d9d9d9 5%, #b3b3b3 5%, #b3b3b3 95%, #808080 95%);
    background: linear-gradient(90deg, #d9d9d9 5%, #b3b3b3 5%, #b3b3b3 95%, #808080 95%);
    height: 80px;
    width: 120px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.power-cord div:nth-child(2)::after {
    background-color: #80ff00;
    border-radius: 50%;
    box-shadow: 1px -1px 1px #4d4d4d, 2px -2px 5px #b3ff66;
    content: '';
    height: 10px;
    width: 10px;
}
.power-cord div:nth-child(3) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 80px;
    width: 40px;
}
.power-cord div:nth-child(4) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 20px;
    width: 30px;
}
.lightning-cord div {
    border: 3px solid #333;
}
.lightning-cord div:nth-child(1) {
    background: #ccc;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    height: 50px;
    width: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.lightning-cord div:nth-child(1)::after {
    background: -webkit-repeating-linear-gradient(0deg, #c90 4px, #fff 8px);
    background: repeating-linear-gradient(90deg, #c90 4px, #fff 8px);
    border: 3px solid #fff;
    border-radius: 5px;
    content: '';
    height: 20px;
    width: 30px;
}
.lightning-cord div:nth-child(2) {
    background: -webkit-linear-gradient(0deg, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%);
    background: linear-gradient(90deg, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%);
    height: 120px;
    width: 75px;
}
.lightning-cord div:nth-child(3) {
    background: -webkit-linear-gradient(0deg, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%);
    border-top: none;
    height: 60px;
    width: 35px;
}
.lightning-cord div:nth-child(4) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 20px;
    width: 25px;
}
._30-pin-cord div {
    border: 3px solid #333;
}
._30-pin-cord div:nth-child(1) {
    background: -webkit-linear-gradient(0deg, #bfbfbf 5%, #d9d9d9 5%, #d9d9d9 95%, #bfbfbf 95%);
    background: linear-gradient(90deg, #bfbfbf 5%, #d9d9d9 5%, #d9d9d9 95%, #bfbfbf 95%);
    border-bottom: none;
    height: 30px;
    width: 150px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
._30-pin-cord div:nth-child(1)::before,
._30-pin-cord div:nth-child(1)::after {
    border: 3px solid #333;
    border-top: none;
    border-bottom: none;
    content: '';
    margin: 0 10px;
    height: 10px;
    width: 5px;
}
._30-pin-cord div:nth-child(2) {
    background: -webkit-linear-gradient(0deg, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%);
    background: linear-gradient(90deg, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%);
    height: 50px;
    width: 180px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
._30-pin-cord div:nth-child(2)::after {
    border: 3px solid #333;
    border-radius: 5px;
    content: '';
    height: 10px;
    width: 20px;
}
._30-pin-cord div:nth-child(3) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 80px;
    width: 40px;
}
._30-pin-cord div:nth-child(4) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 20px;
    width: 30px;
}
.usb-cord div {
    border: 3px solid #333;
}
.usb-cord div:nth-child(1) {
    background: -webkit-linear-gradient(0deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    border-bottom: none;
    height: 80px;
    width: 80px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.usb-cord div:nth-child(1)::before,
.usb-cord div:nth-child(1)::after {
    background: -webkit-repeating-linear-gradient(0deg, #c90 2px, #fff 6px);
    background: repeating-linear-gradient(90deg, #c90 2px, #fff 6px);
    border: 3px solid #333;
    border-radius: 5px;
    content: '';
    margin: 0 10px;
    height: 10px;
    width: 15px;
}
.usb-cord div:nth-child(2) {
    background: -webkit-linear-gradient(0deg, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%);
    background: linear-gradient(90deg, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%);
    border-radius: 0 0 10px 10px;
    height: 100px;
    width: 110px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.usb-cord div:nth-child(2) svg {
    height: 50px;
    width: 50px;
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
}
.usb-cord div:nth-child(2) svg path {
    fill: #333;
}
.usb-cord div:nth-child(3) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 80px;
    width: 40px;
}
.usb-cord div:nth-child(4) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 20px;
    width: 30px;
}
.thunderbolt-cord div {
    border: 3px solid #333;
}
.thunderbolt-cord div:nth-child(1) {
    background: -webkit-linear-gradient(0deg, #b3b3b3 5%, #f2f2f2 5%, #f2f2f2 10%, #d9d9d9 10%, #d9d9d9 90%, #a6a6a6 90%);
    background: linear-gradient(90deg, #b3b3b3 5%, #f2f2f2 5%, #f2f2f2 10%, #d9d9d9 10%, #d9d9d9 90%, #a6a6a6 90%);
    border-bottom: none;
    height: 50px;
    width: 60px;
}
.thunderbolt-cord div:nth-child(2) {
    background: -webkit-linear-gradient(0deg, #ccc 10%, #f2f2f2 10%, #f2f2f2 20%, #f2f2f2 20%, #f2f2f2 90%, #d9d9d9 0%);
    background: linear-gradient(90deg, #ccc 10%, #f2f2f2 10%, #f2f2f2 20%, #f2f2f2 20%, #f2f2f2 90%, #d9d9d9 0%);
    height: 120px;
    width: 75px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.thunderbolt-cord div:nth-child(2) svg {
    height: 30px;
    width: 20px;
}
.thunderbolt-cord div:nth-child(2) svg path {
    fill: #333;
}
.thunderbolt-cord div:nth-child(3) {
    background: -webkit-linear-gradient(0deg, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%);
    border-top: none;
    height: 60px;
    width: 35px;
}
.thunderbolt-cord div:nth-child(4) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 20px;
    width: 25px;
}
.mini-dvi-cord div {
    border: 3px solid #333;
}
.mini-dvi-cord div:nth-child(1) {
    background: -webkit-linear-gradient(0deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    border-bottom: none;
    height: 70px;
    width: 100px;
}
.mini-dvi-cord div:nth-child(2) {
    background: -webkit-linear-gradient(0deg, #737373 5%, #595959 5%, #595959 95%, #404040 95%);
    background: linear-gradient(90deg, #737373 5%, #595959 5%, #595959 95%, #404040 95%);
    height: 100px;
    width: 130px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.mini-dvi-cord div:nth-child(2)::after {
    color: #b3b3b3;
    content: 'HDMI';
    font-family: helvetica;
}
.mini-dvi-cord div:nth-child(3) {
    background: -webkit-linear-gradient(0deg, #4d4d4d 20%, #666 20%, #666 70%, #8c8c8c 70%);
    background: linear-gradient(90deg, #4d4d4d 20%, #666 20%, #666 70%, #8c8c8c 70%);
    border-top: none;
    height: 80px;
    width: 40px;
}
.mini-dvi-cord div:nth-child(4) {
    background: -webkit-linear-gradient(0deg, #4d4d4d 30%, #666 30%, #666 70%, #8c8c8c 70%);
    background: linear-gradient(90deg, #4d4d4d 30%, #666 30%, #666 70%, #8c8c8c 70%);
    border-top: none;
    height: 20px;
    width: 30px;
}
.audio-cord div {
    border: 3px solid #333;
}
.audio-cord div:nth-child(1) {
    background: -webkit-linear-gradient(0deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    border-bottom: 3px solid #fff;
    height: 20px;
    width: 20px;
}
.audio-cord div:nth-child(2) {
    background: -webkit-linear-gradient(0deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    border-top: none;
    border-bottom: 3px solid #fff;
    height: 20px;
    width: 20px;
}
.audio-cord div:nth-child(3) {
    background: -webkit-linear-gradient(0deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    border-top: none;
    border-bottom: 3px solid #fff;
    height: 20px;
    width: 20px;
}
.audio-cord div:nth-child(4) {
    background: -webkit-linear-gradient(0deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    border-top: none;
    border-bottom: 3px solid #fff;
    height: 20px;
    width: 20px;
}
.audio-cord div:nth-child(5) {
    background: -webkit-linear-gradient(0deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%);
    border-bottom: none;
    height: 5px;
    width: 26px;
}
.audio-cord div:nth-child(6) {
    background: -webkit-linear-gradient(0deg, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%);
    background: linear-gradient(90deg, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%);
    height: 100px;
    width: 40px;
}
.audio-cord div:nth-child(7) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 50px;
    width: 25px;
}
.audio-cord div:nth-child(8) {
    background: -webkit-linear-gradient(0deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%);
    border-top: none;
    height: 20px;
    width: 20px;
}

HTML

USB, HDMI, 串口，电源充电线（插头）等。

apple, cords

编辑器支持Emmet

快捷键

USB, HDMI, 串口，电源充电线（插头）等。

apple, cords

HTML5 GSAP七彩苹果LOGO组装动画

漂亮的苹果纹理图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：