CSS3 小老鼠驱动的机械传动设备

未使用图片，包括小老鼠，篮球，管道，地面砖头，轴承和滚轮，都是使用DIV块元素+CSS3样式一个个精心构建。

machine

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*TREADMILL*/

* {
    margin: 0;
    padding: 0;
}
body {
    /*background:url(tim.png);*/
    
    background-color: #2eb5b8;
    background-size: 100%, 100%;
    margin-top: 30%;
}
#content {
    display: block;
    position: relative;
    padding-bottom: 6%;
    top: 50%;
}
.cog {
    display: block;
    position: absolute;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
.cog .in {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
.cog .rectangle {
    display: block;
    position: absolute;
    width: 100%;
    padding-bottom: 20%;
    top: 40%;
    background-color: #dbdbdb;
}
.vertical {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.round {
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
}
.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(0);
    }
}
@keyframes rotateIn {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0);
    }
}
#treadmill1 {
    top: 200%;
    left: 14%;
}
#treadmill2 {
    top: 0%;
    left: 32%;
}
#treadmill3 {
    top: -190%;
    left: 48%;
}
.treadmill {
    display: block;
    width: 15%;
    padding-bottom: 2.5%;
    position: absolute;
    height: 0;
    background-color: #2853d6;
}
.treadmill .cog {
    width: 12%;
    padding: 2.5%;
    left: 60%;
    background-color: #dbdbdb;
    z-index: 16;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
}
.treadmill .cog .rectangle {
    background-color: #dbdbdb;
}
.treadmill .cog .in {
    background-color: #2853d6;
}
.treadmill .footer {
    display: block;
    position: absolute;
    width: 12%;
    padding-bottom: 12%;
    top: 50%;
    z-index: 12;
    left: 1%;
}
.treadmill .footer .rectangle {
    display: block;
    position: absolute;
    width: 25%;
    padding-bottom: 100%;
    background-color: #dbdbdb;
    left: 45%;
}
.treadmill .footer .vertical {
    top: 45%;
}
.treadmill > .footer + .footer {
    margin-left: 84%;
}
.treadmill .wheel {
    display: block;
    position: absolute;
    width: 13%;
    padding-bottom: 12%;
    top: 15%;
    background-color: #1944c5;
    z-index: 11;
    left: 2%;
}
.treadmill > .wheel + .wheel {
    /*MOUSE MOTOR*/
    
    margin-left: 83%;
}
#mouseMotor1 {
    top: 200%;
    left: 5%;
}
#mouseMotor1 .mouse,
#mouseMotor1 .in .cog,
#mouseMotor1 .mouse .footMouse,
#treadmill1 .cog {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
#mouseMotor2 {
    top: 102%;
    left: 29%;
}
#mouseMotor2 .mouse,
#mouseMotor2 .in .cog,
#mouseMotor2 .mouse .footMouse,
#treadmill2 .cog {
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}
#mouseMotor3 {
    top: -96%;
    right: 44%;
}
#mouseMotor3 .mouse,
#mouseMotor3 .in .cog,
#mouseMotor3 .mouse .footMouse,
#treadmill3 .cog {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}
.mouseMotor {
    display: block;
    position: absolute;
    width: 8%;
    padding: 0.5%;
    background-color: #4ac282;
}
.mouseMotor > .in {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 60%;
}
.mouseMotor > .in > .cog {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.mouseMotor > .in > .cog:nth-child(1) {
    width: 47%;
    padding: 9%;
    left: 0%;
    top: -4%;
    background-color: #37b074;
}
.mouseMotor > .in > .cog:nth-child(1) > .in {
    width: 100%;
    padding-bottom: 100%;
    background-color: #2eb5b8;
}
.mouseMotor > .in > .cog:nth-child(1) > .in > .rectangle {
    background-color: #1944c5;
}
.mouseMotor > .in > .cog:nth-child(2) {
    width: 14%;
    padding: 5%;
    right: 5%;
    top: 7%;
    background-color: #dbdbdb;
    z-index: 16;
}
.mouseMotor > .in > .cog:nth-child(2) .in {
    background-color: #cacaca;
}
.mouseMotor > .in > .piston {
    display: none;
    position: absolute;
    width: 37%;
    padding-bottom: 17%;
    background-color: #1fa0a3;
    bottom: 0%;
    right: 0%;
    z-index: 10;
}
.mouseMotor > .in > .piston > .cog {
    width: 0%;
    padding: 35%;
    left: 15%;
    top: -60%;
    background-color: #1fa0a3;
}
.mouse {
    display: block;
    position: absolute;
    width: 30%;
    padding-bottom: 15%;
    bottom: 13%;
    left: 21%;
    -webkit-animation-name: mouseAnim;
    animation-name: mouseAnim;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes mouseAnim {
    0% {
        left: 21%;
    }
    50% {
        left: 16%;
    }
    100% {
        left: 21%;
    }
}
@keyframes mouseAnim {
    0% {
        left: 21%;
    }
    50% {
        left: 16%;
    }
    100% {
        left: 21%;
    }
}
.mouse .bodyMouse {
    display: block;
    position: absolute;
    width: 80%;
    padding-bottom: 40%;
    background-color: #ededed;
    bottom: 0%;
    left: 0%;
}
.mouse .footMouse {
    display: block;
    position: absolute;
    width: 26%;
    padding-bottom: 26%;
    background-color: #ededed;
    bottom: -15%;
    left: 13%;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -webkit-animation-name: mouseWalk;
    animation-name: mouseWalk;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes mouseWalk {
    0% {
        left: 13%;
    }
    50% {
        left: 18%;
    }
    100% {
        left: 13%;
    }
}
@keyframes mouseWalk {
    0% {
        left: 13%;
    }
    50% {
        left: 18%;
    }
    100% {
        left: 13%;
    }
}
.mouse .footMouse + .footMouse {
    left: 32%;
    -webkit-animation-name: mouseWalk2 !important;
    animation-name: mouseWalk2 !important;
}
@-webkit-keyframes mouseWalk2 {
    0% {
        left: 36%;
    }
    50% {
        left: 28%;
    }
    100% {
        left: 36%;
    }
}
@keyframes mouseWalk2 {
    0% {
        left: 36%;
    }
    50% {
        left: 28%;
    }
    100% {
        left: 36%;
    }
}
.mouse .headMouse {
    display: block;
    position: absolute;
    width: 56%;
    padding-bottom: 49%;
    background-color: #ededed;
    bottom: 0%;
    left: 34%;
}
.mouse .headMouse > .eye {
    display: block;
    position: absolute;
    width: 14%;
    padding-bottom: 14%;
    background-color: #1d1d1d;
    bottom: 53%;
    left: 61%;
    z-index: 15;
}
.mouse .headMouse > .snout {
    display: block;
    position: absolute;
    width: 53%;
    padding-bottom: 39%;
    background-color: #ededed;
    bottom: 0%;
    left: 61%;
}
.mouse .ear {
    display: block;
    position: absolute;
    width: 14%;
    padding: 6%;
    background-color: #ededed;
    bottom: 43%;
    left: 42%;
    z-index: 15;
}
.mouse .ear > .in {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 150%;
    /*BOWLING BALL*/
    
    background-color: #db8676;
}
#bowling1 {
    left: 7%;
    top: 114%;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation-name: bowling1Anim;
    animation-name: bowling1Anim;
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    opacity: 1;
}
@-webkit-keyframes bowling1Anim {
    0%, 70% {
        top: -550%;
        transform: rotate(0deg);
        opacity: 0;
    }
    74% {
        opacity: 1;
    }
    84% {
        top: 114%;
    }
    88% {
        top: 90%;
    }
    92% {
        top: 114%;
        transform: rotate(90deg);
    }
    95% {
        top: 100%;
    }
    100% {
        top: 114%;
    }
}
@keyframes bowling1Anim {
    0%, 70% {
        top: -550%;
        transform: rotate(0deg);
        opacity: 0;
    }
    74% {
        opacity: 1;
    }
    84% {
        top: 114%;
    }
    88% {
        top: 90%;
    }
    92% {
        top: 114%;
        transform: rotate(90deg);
    }
    95% {
        top: 100%;
    }
    100% {
        top: 114%;
    }
}
#bowling2 {
    left: 16%;
    top: 115%;
    -webkit-animation-name: bowling2Move;
    animation-name: bowling2Move;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes bowling2Move {
    0% {
        left: 16%;
    }
    100% {
        left: 23.7%;
    }
}
@keyframes bowling2Move {
    0% {
        left: 16%;
    }
    100% {
        left: 23.7%;
    }
}
#bowling3 {
    left: 34%;
    top: -85%;
    -webkit-animation-name: bowling3Move;
    animation-name: bowling3Move;
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes bowling3Move {
    0% {
        left: 34%;
    }
    100% {
        left: 41.8%;
    }
}
@keyframes bowling3Move {
    0% {
        left: 34%;
    }
    100% {
        left: 41.8%;
    }
}
.ball {
    display: block;
    position: absolute;
    width: 5.2%;
    padding-bottom: 5.2%;
}
.bowling {
    background-color: #1944c5;
    position: absolute;
    display: block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.ballRotate {
    display: block;
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    -webkit-animation-name: bowlingRotate;
    animation-name: bowlingRotate;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bowlingRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes bowlingRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#bowling2 .ballRotate {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
#bowling3 .ballRotate {
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
}
.bowling .finger {
    display: block;
    position: absolute;
    width: 10%;
    padding-bottom: 10%;
    background-color: #1d1d1d;
}
.bowling .finger:nth-child(1) {
    top: 22%;
    left: 47%;
}
.bowling .finger:nth-child(2) {
    top: 24%;
    left: 65%;
}
.bowling .finger:nth-child(3) {
    top: 38%;
    /*BASKET BALL*/
    
    left: 54%;
}
#basketBall1 {
    left: 50%;
    top: -285%;
    -webkit-animation-name: basketBallAnim;
    animation-name: basketBallAnim;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
@-webkit-keyframes basketBallAnim {
    0% {
        left: 50%;
        top: -285%;
        -webkit-transform: rotate(-45deg);
    }
    6% {
        left: 60%;
        top: -285%;
        width: 5.8%;
        padding-bottom: 5.8%;
    }
    10% {
        left: 75%;
        top: -198%;
        /*panel*/
        
        width: 5.5%;
    }
    14% {
        left: 71%;
        top: -220%;
        width: 5.8%;
        -webkit-transform: rotate(180deg);
    }
    16% {
        left: 66%;
        top: -210%;
        /*panel*/
        
        width: 5.5%;
    }
    20% {
        left: 70%;
        top: -200%;
        width: 5.8%;
    }
    23% {
        left: 72%;
        top: -128%;
        width: 5.5%;
        /*panel*/
        
        -webkit-transform: rotate(45deg);
    }
    25% {
        left: 70%;
        top: -96%;
        width: 5.5%;
    }
    29% {
        left: 74%;
        top: 55%;
        width: 5.8%;
        padding-bottom: 5.8%;
    }
    32% {
        left: 80%;
        top: 275%;
        padding-bottom: 5.2%;
        /*sol*/
        
        -webkit-transform: rotate(360deg);
    }
    34% {
        left: 75%;
        top: 185%;
        padding-bottom: 6%;
    }
    36% {
        left: 72%;
        top: 275%;
        /*sol*/
        
        padding-bottom: 5.2%;
    }
    38% {
        left: 70%;
        top: 224%;
        padding-bottom: 6%;
    }
    40% {
        left: 68%;
        top: 280%;
        /*sol*/
        
        padding-bottom: 5.2%;
    }
    42% {
        left: 67%;
        top: 248%;
        padding-bottom: 5.8%;
    }
    43% {
        left: 66%;
        top: 272%;
        /*sol*/
        
        padding-bottom: 5.4%;
    }
    44% {
        left: 65.5%;
        top: 256%;
        padding-bottom: 5.8%;
        -webkit-transform: rotate(0deg);
    }
    45% {
        left: 65%;
        top: 272%;
        /*sol*/
        
        padding-bottom: 5.6%;
    }
    46% {
        left: 64.5%;
        top: 268%;
        padding-bottom: 5.8%;
    }
    47% {
        left: 64%;
        top: 272%;
        /*sol*/
        
        padding-bottom: 5.6%;
    }
    90%,
    100% {
        left: 59%;
        top: 270%;
        padding-bottom: 5.8%;
        -webkit-transform: rotate(-150deg);
    }
}
@keyframes basketBallAnim {
    0% {
        left: 50%;
        top: -285%;
        transform: rotate(-45deg);
    }
    6% {
        left: 60%;
        top: -285%;
        width: 5.8%;
        padding-bottom: 5.8%;
    }
    10% {
        left: 75%;
        top: -198%;
        /*panel*/
        
        width: 5.5%;
    }
    14% {
        left: 71%;
        top: -220%;
        width: 5.8%;
        transform: rotate(180deg);
    }
    16% {
        left: 66%;
        top: -210%;
        /*panel*/
        
        width: 5.5%;
    }
    20% {
        left: 70%;
        top: -200%;
        width: 5.8%;
    }
    23% {
        left: 72%;
        top: -128%;
        width: 5.5%;
        /*panel*/
        
        transform: rotate(45deg);
    }
    25% {
        left: 70%;
        top: -96%;
        width: 5.5%;
    }
    29% {
        left: 74%;
        top: 55%;
        width: 5.8%;
        padding-bottom: 5.8%;
    }
    32% {
        left: 80%;
        top: 275%;
        padding-bottom: 5.2%;
        /*sol*/
        
        transform: rotate(360deg);
    }
    34% {
        left: 75%;
        top: 185%;
        padding-bottom: 6%;
    }
    36% {
        left: 72%;
        top: 275%;
        /*sol*/
        
        padding-bottom: 5.2%;
    }
    38% {
        left: 70%;
        top: 224%;
        padding-bottom: 6%;
    }
    40% {
        left: 68%;
        top: 280%;
        /*sol*/
        
        padding-bottom: 5.2%;
    }
    42% {
        left: 67%;
        top: 248%;
        padding-bottom: 5.8%;
    }
    43% {
        left: 66%;
        top: 272%;
        /*sol*/
        
        padding-bottom: 5.4%;
    }
    44% {
        left: 65.5%;
        top: 256%;
        padding-bottom: 5.8%;
        transform: rotate(0deg);
    }
    45% {
        left: 65%;
        top: 272%;
        /*sol*/
        
        padding-bottom: 5.6%;
    }
    46% {
        left: 64.5%;
        top: 268%;
        padding-bottom: 5.8%;
    }
    47% {
        left: 64%;
        top: 272%;
        /*sol*/
        
        padding-bottom: 5.6%;
    }
    90%,
    100% {
        left: 59%;
        top: 270%;
        padding-bottom: 5.8%;
        transform: rotate(-150deg);
    }
}
.basketBall {
    overflow: hidden;
    background-color: #c26125;
    display: block;
    position: absolute;
    width: 5.8%;
    padding-bottom: 5.8%;
}
.basketBall > .in {
    display: block;
    position: absolute;
    background-color: #ab4d24;
    width: 100%;
    padding: 5%;
}
.basketBall > .in:nth-child(1) {
    left: 0%;
    top: -78%;
}
.basketBall .in:nth-child(2) {
    left: 0%;
    top: 72%;
}
.basketBall .in > .in {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background-color: #c26125;
}
.basketBall .rectangle {
    display: block;
    position: absolute;
    width: 125%;
    padding-bottom: 5%;
    background-color: #ab4d24;
    top: 50%;
    left: -11%;
}
.basketBall .rectangle + .rectangle {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    /*NODE*/
    
    top: 53%;
}
#node1 {
    transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    left: 12%;
    top: 214%;
    width: 12%;
}
#node2 {
    transform: rotate(-49deg);
    -webkit-transform: rotate(-49deg);
    left: 36.12%;
    top: 116%;
    width: 9%;
}
#node3 {
    transform: rotate(-57deg);
    -webkit-transform: rotate(-57deg);
    left: 54%;
    top: -81%;
    width: 8%;
}
.node {
    display: block;
    position: absolute;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    padding-bottom: 2%;
    z-index: 15;
}
.node > .in {
    display: block;
    position: absolute;
    width: 100%;
    background-color: #1d1d1d;
}
#node1 > .in {
    padding-bottom: 2%;
}
#node2 > .in {
    padding-bottom: 3%;
}
#node3 > .in {
    padding-bottom: 3%;
}
.node > .in + .in {
    bottom: -8%;
    transform: rotate(3deg);
    /*WALL*/
    
    -webkit-transform: rotate(3deg);
}
.wall {
    display: block;
    position: absolute;
    width: 85%;
    padding-bottom: 2.5%;
    background-color: #dbdbdb;
    bottom: -308%;
    right: 5%;
}
.wall .lign {
    display: block;
    position: absolute;
    width: 104%;
}
.wall .lign:nth-child(1) {
    left: -0.8%;
    top: -13%;
}
.wall .lign:nth-child(2) {
    left: -0.5%;
    bottom: -10%;
}
.wall .lign .brick {
    display: block;
    float: left;
    position: relative;
    margin: 0 0.2%;
    width: 3.5%;
    padding-top: 1.5%;
    background-color: #be3f3f;
    border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
}
.wall .lign:nth-child(1) .brick:nth-child(1) {
    width: 2%;
}
.wall .lign:nth-child(1) .brick:nth-child(25) {
    width: 5%;
}
.wall .lign:nth-child(2) .brick:nth-child(1) {
    width: 4%;
}
.wall .lign:nth-child(2) .brick:nth-child(2) {
    /*BASKET*/
    
    width: 2.5%;
}
.wood {
    background-color: #c26125;
}
.ramp {
    display: block;
    position: absolute;
    width: 10%;
    padding-top: 10%;
    top: 20%;
    right: 20%;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#contentRamp1 {
    display: block;
    position: absolute;
    width: 7%;
    padding-bottom: 12%;
    left: 63%;
    top: -187%;
    overflow: hidden;
}
#contentRamp1 .ramp {
    display: block;
    position: absolute;
    width: 200%;
    padding-bottom: 24%;
    top: 32%;
    left: -40%;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
}
#contentRamp1 .ramp > .in {
    display: block;
    position: absolute;
    background-color: #ab4d24;
    width: 200%;
    padding-bottom: 9%;
    top: 24%;
    left: -40%;
}
#contentRamp2 {
    display: block;
    position: absolute;
    width: 3%;
    padding-bottom: 12%;
    left: 77.5%;
    top: -187%;
    overflow: hidden;
}
#contentRamp2 .ramp {
    display: block;
    position: absolute;
    width: 200%;
    padding-bottom: 70%;
    top: 40%;
    left: -48%;
    transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
}
#contentRamp2 .ramp > .in {
    display: block;
    position: absolute;
    background-color: #ab4d24;
    width: 200%;
    padding-bottom: 21%;
    top: 24%;
    left: -40%;
}
.panel {
    display: block;
    position: absolute;
    width: 3%;
    padding-bottom: 16%;
    top: -267%;
    right: 17%;
    overflow: hidden;
    z-index: 10;
}
.panel > .in {
    display: block;
    position: absolute;
    background-color: #ab4d24;
    width: 60%;
    padding-bottom: 540%;
    top: 0%;
    left: 20%;
}
.pylon {
    display: block;
    position: absolute;
    background-color: #cacaca;
    width: 2.6%;
    padding-bottom: 22%;
    top: -31%;
    right: 11%;
}
.pylon .in {
    display: block;
    position: absolute;
    background-color: #b6b6b6;
    width: 50%;
    padding-bottom: 900%;
    top: 0%;
    left: 0%;
}
.pylon .end {
    display: block;
    position: absolute;
    background-color: #cacaca;
    width: 120%;
    padding-bottom: 70%;
    top: 0%;
    right: -8%;
    z-index: 9;
}
.pylon .end + .end {
    top: 100%;
}
.pylon .end .in {
    display: block;
    position: absolute;
    background-color: #bebebe;
    width: 68%;
    padding-bottom: 58%;
    top: 0%;
    left: 0%;
}
.contentPylonRound {
    display: block;
    position: absolute;
    width: 10%;
    padding-bottom: 10%;
    top: -135%;
    right: 11%;
    z-index: 9;
}
.pylonRound {
    display: block;
    position: absolute;
    background-color: #cacaca;
    width: 66%;
    padding-bottom: 66%;
    top: 0%;
    right: 0%;
    -webkit-border-top-right-radius: 2.7em;
    -moz-border-top-right-radius: 2.7em;
    border-top-right-radius: 2.7em;
}
.pylonRound > .in {
    display: block;
    position: absolute;
    background-color: #b6b6b6;
    width: 70%;
    padding-bottom: 80%;
    top: 20%;
    right: 20%;
    -webkit-border-top-right-radius: 2em;
    -moz-border-top-right-radius: 2em;
    border-top-right-radius: 2em;
}
.pylonRound > .in + .in {
    display: block;
    position: absolute;
    background-color: #2eb5b8;
    width: 62%;
    padding-bottom: 64%;
    top: 39%;
    right: 39%;
    -webkit-border-top-right-radius: 1.4em;
    -moz-border-top-right-radius: 1.4em;
    border-top-right-radius: 1.4em;
}
.pylonRound .end {
    display: block;
    position: absolute;
    background-color: #cacaca;
    width: 48%;
    padding-bottom: 23%;
    top: 79%;
    right: -4%;
    z-index: 9;
}
.pylonRound .end > .in {
    display: block;
    position: absolute;
    background-color: #bebebe;
    width: 68%;
    padding-bottom: 59%;
    top: 0%;
    left: 0%;
}
.pylonRound .end + .end {
    width: 30%;
    padding-bottom: 50%;
    top: -6%;
    left: 0%;
}
.pylonRound .end + .end > .in {
    display: block;
    position: absolute;
    background-color: #bebebe;
    width: 100%;
    padding-bottom: 106%;
    top: 37%;
    left: 0%;
}
.contentPylonRound .separate {
    display: block;
    position: absolute;
    background-color: #b3b3b3;
    width: 31%;
    padding-bottom: 2%;
    top: 66%;
    right: -2%;
    z-index: 12;
}

HTML

<html>

</div>
    </div>
</body>

</html>

未使用图片，包括小老鼠，篮球，管道，地面砖头，轴承和滚轮，都是使用DIV块元素+CSS3样式一个个精心构建。

machine

编辑器支持Emmet

快捷键

未使用图片，包括小老鼠，篮球，管道，地面砖头，轴承和滚轮，都是使用DIV块元素+CSS3样式一个个精心构建。

machine

TweenMax.js SVG 可交互的烤面包机动画

纯CSS实现的3D索尼随身听

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：