SVG+CSS3 绿色生活（可持续的循环生活模式）

包含购物车、房子、风车、垃圾箱、废品回收车等图形。

svg，recycle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2581
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
}
:root {
    font-size: 16px;
    font-family: Open Sans, sans-serif;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
.line {
    height: 60px;
    border-left: 5px dotted rgba(40, 44, 54, 0.85);
    position: absolute;
}
.line-1 {
    top: 10%;
    left: 45%;
}
.line-2 {
    display: none;
}
.line-3 {
    display: none;
}
.infographic-label {
    background: rgba(40, 44, 54, 0.85);
    border-radius: 100em;
    display: inline-block;
    padding: 9.5px 20px;
    font-weight: 600;
    color: white;
    line-height: 1;
    position: absolute;
    width: 120px;
    text-align: center;
}
.infographic-label-white {
    top: 7%;
    left: 57%;
    margin-left: -60px;
    tranform-origin: 120px 50%;
}
.infographic-label-primary {
    color: #8ac249;
    right: -5%;
    bottom: 23%;
    tranform-origin: -120px 50%;
}
.infographic-label-warning {
    color: #e4b337;
    left: -3%;
    bottom: 17%;
    tranform-origin: -120px 50%;
}
@-webkit-keyframes wings {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes wings {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes truck {
    0%, 15%, 48%, 75%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0) rotate(-108deg);
        transform: translate3d(0, 0, 0) rotate(-108deg);
    }
    35%,
    38% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(-4px, 0, 0) rotate(-108deg);
        transform: translate3d(-4px, 0, 0) rotate(-108deg);
    }
    65% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(-2px, 0, 0) rotate(-108deg);
        transform: translate3d(-2px, 0, 0) rotate(-108deg);
    }
    85% {
        -webkit-transform: translate3d(-1px, 0, 0) rotate(-108deg);
        transform: translate3d(-1px, 0, 0) rotate(-108deg);
    }
}
@keyframes truck {
    0%, 15%, 48%, 75%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0) rotate(-108deg);
        transform: translate3d(0, 0, 0) rotate(-108deg);
    }
    35%,
    38% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(-4px, 0, 0) rotate(-108deg);
        transform: translate3d(-4px, 0, 0) rotate(-108deg);
    }
    65% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(-2px, 0, 0) rotate(-108deg);
        transform: translate3d(-2px, 0, 0) rotate(-108deg);
    }
    85% {
        -webkit-transform: translate3d(-1px, 0, 0) rotate(-108deg);
        transform: translate3d(-1px, 0, 0) rotate(-108deg);
    }
}
@-webkit-keyframes fork-lift {
    0%, 15%, 48%, 75%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    38% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
    65% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }
    85% {
        -webkit-transform: translate3d(0, -1px, 0);
        transform: translate3d(0, -1px, 0);
    }
}
@keyframes fork-lift {
    0%, 15%, 48%, 75%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    35%,
    38% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
    65% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }
    85% {
        -webkit-transform: translate3d(0, -1px, 0);
        transform: translate3d(0, -1px, 0);
    }
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    28.33333% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    33.33333% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    61.66667% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    66.66667% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    90% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    28.33333% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    33.33333% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    61.66667% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    66.66667% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    90% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate-c {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    28.33333% {
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg);
    }
    33.33333% {
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg);
    }
    61.66667% {
        -webkit-transform: rotate(-240deg);
        transform: rotate(-240deg);
    }
    66.66667% {
        -webkit-transform: rotate(-240deg);
        transform: rotate(-240deg);
    }
    90% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@keyframes rotate-c {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    28.33333% {
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg);
    }
    33.33333% {
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg);
    }
    61.66667% {
        -webkit-transform: rotate(-240deg);
        transform: rotate(-240deg);
    }
    66.66667% {
        -webkit-transform: rotate(-240deg);
        transform: rotate(-240deg);
    }
    90% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
.graphic-circular {
    background-image: -webkit-linear-gradient(#244b8a, #1e3e72);
    background-image: linear-gradient(#244b8a, #1e3e72);
    text-align: center;
    padding: 5%;
}
.graphic-circular .svg-holder {
    height: 500px;
    width: 500px;
    position: relative;
    margin: auto;
}
.graphic-circular svg,
.graphic-circular .infographic-label-holder {
    height: 450px;
    width: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -225px;
    max-width: 100%;
}
.graphic-circular #truck {
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: truck 2s infinite;
    animation: truck 2s infinite;
}
.graphic-circular #fork-lift {
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: fork-lift 2s infinite;
    animation: fork-lift 2s infinite;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.graphic-circular #wings {
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: linear wings 4s infinite;
    animation: linear wings 4s infinite;
}

HTML

<span class="infographic-label infographic-label-white">gebruik</span>
            <span class="infographic-label infographic-label-primary">recycling</span>
            <span class="infographic-label infographic-label-warning">productie</span>
        </div>

包含购物车、房子、风车、垃圾箱、废品回收车等图形。

svg，recycle

编辑器支持Emmet

快捷键

包含购物车、房子、风车、垃圾箱、废品回收车等图形。

svg，recycle

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：