CSS3 自行车 - 踏得网

CSS3 Cyclist 使用圆和半圆构建的卡通图画。

CSS3,模型

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #DCDCDC;
}
.cyclist {
    position: fixed;
    top: 150px;
    left: 35%;
}
.wheel,
.wheel-2 {
    position: absolute;
    background-color: #fff;
    margin-top: 30px;
    margin-left: 15px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 3px solid #3E3D3D
}
.wheel-2 {
    margin-left: 180px;
}
.back {
    position: absolute;
    background-color: #fff;
    height: 75px;
    width: 150px;
    border-radius: 50% / 100% 100% 0 0;
    border: 3px solid #3e3d3d;
    margin-top: -100px;
    margin-left: 70px;
    transform: rotate(-25deg);
}
.leg {
    position: absolute;
    background-color: #fff;
    height: 40px;
    width: 80px;
    border-radius: 50% / 100% 100% 0 0;
    border: 3px solid #3e3d3d;
    margin-top: -18px;
    margin-left: 97px;
    transform: rotate(25deg);
}
.ankle {
    position: absolute;
    background-color: #fff;
    height: 30px;
    width: 60px;
    border-radius: 50% / 100% 100% 0 0;
    border: 3px solid #3e3d3d;
    margin-top: 50px;
    margin-left: 115px;
    transform: rotate(-80deg);
}
.foot {
    position: absolute;
    background-color: #fff;
    height: 15px;
    width: 30px;
    border-radius: 50% / 100% 100% 0 0;
    border: 3px solid #3e3d3d;
    margin-top: 82px;
    margin-left: 158px;
}
.arm {
    position: absolute;
    background-color: #fff;
    height: 30px;
    width: 60px;
    border-radius: 50% / 100% 100% 0 0;
    border: 3px solid #3e3d3d;
    margin-top: -48px;
    margin-left: 179px;
    transform: rotate(-80deg);
}
.hand {
    position: absolute;
    background-color: #fff;
    height: 10px;
    width: 20px;
    border-radius: 50% / 100% 100% 0 0;
    border: 3px solid #3e3d3d;
    margin-top: -11px;
    margin-left: 220px;
}
.head {
    position: absolute;
    background-color: #fff;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 3px solid #3e3d3d;
    margin-top: -90px;
    margin-left: 240px;
}

HTML

CSS3 Cyclist 使用圆和半圆构建的卡通图画。

CSS3,模型

编辑器支持Emmet

快捷键

CSS3 Cyclist 使用圆和半圆构建的卡通图画。

CSS3,模型

CSS3 自行车赛车手骑车动画

CSS3+SVG 七巧板拼成自行车形状动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：