JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
p Bicycle
#road
.shadow
.bike
- for (var i = 0; i < 10; i++)
.wind
.bike_body
.bike_body_pedal
.arm_a
.bike_body_frame_side_a
.bike_body_frame_side_b
.pedal_a
.bike_body_frame_side_a
.bike_body_frame_side_b
.arm_b
.bike_body_frame_side_a
.bike_body_frame_side_b
.pedal_b
.bike_body_frame_side_a
.bike_body_frame_side_b
.bike_body_saddle
.bike_body_saddle_side_a
.bike_body_saddle_side_b
.bike_body_rear
.arm_a
.bike_body_frame_side_a
.bike_body_frame_side_b
.arm_b
.bike_body_frame_side_a
.bike_body_frame_side_b
.arm_c
.bike_body_frame_side_a
.bike_body_frame_side_b
.arm_d
.bike_body_frame_side_a
.bike_body_frame_side_b
.bike_body_triangle
.side_a
.bike_body_frame_1
.bike_body_frame_2
.bike_body_frame_3
.side_b
.bike_body_frame_1
.bike_body_frame_2
.bike_body_frame_3
.bike_body_front
.side_a
.bike_body_frame_1
.bike_body_frame_2
.side_b
.bike_body_frame_1
.bike_body_frame_2
.side_c
.bike_body_frame_side_a
.bike_body_frame_side_b
.arm_a
.bike_body_frame_side_a
.bike_body_frame_side_b
.arm_b
.bike_body_frame_side_a
.bike_body_frame_side_b
.bike_tire.front
.rotate_tire
.side_a
- for (i = 0; i < 36; i++)
.bike_tire_frame
.side_b
- for (i = 0; i < 36; i++)
.bike_tire_frame
.side_c
- for (i = 0; i < 36; i++)
.bike_tire_frame
.bike_tire.rear
.rotate_tire
.side_a
- for (i = 0; i < 36; i++)
.bike_tire_frame
.side_b
- for (i = 0; i < 36; i++)
.bike_tire_frame
.side_c
- for (i = 0; i < 36; i++)
.bike_tire_frame
$R: random(155) + 100;
$G: random(155) + 100;
$B: random(155) + 100;
$frameColor1: linear-gradient(to bottom, rgba($R, $G, $B, 1) 0%, rgba($R - 50, $G - 50, $B - 50, 1) 100%);
$frameColor2: linear-gradient(to bottom, rgba($R - 50, $G - 50, $B - 50, 1) 0%, rgba($R - 100, $G - 100, $B - 100, 1) 100%);
$rotateSpeed: 3000ms;
body {
background: #eef;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
perspective: 400px;
}
div {
box-sizing: border-box;
transform-style: preserve-3d;
}
p {
position: absolute;
font-size: 100px;
color: rgba($R - 50, $G - 50, $B - 50, 1);
font-family: 'Dosis', sans-serif;
letter-spacing: 3px;
transform: translateY(-130px);
}
#road {
// transform: rotateY(-25deg) rotateX(-45deg);
animation: run 10000ms linear infinite;
.wind {
position: absolute;
left: 50%;
width: 4px;
height: 200px;
margin-left: -2px;
border-radius: 999px;
overflow: hidden;
@for $i from 1 through 11 {
&:nth-child(#{$i}) {
transform: translate3d(#{random(300) - 200}px, #{random(300) - 300}px, #{random(400) - 200}px) rotateZ(90deg);
&::before {
content: '';
position: absolute;
width: 4px;
height: 300px;
background: rgba($R, $G, $B, 0.3);
border-radius: 999px;
transform: translateY(-300px);
animation: wind #{random(2000) + 1000}ms #{random(4000) + 1000}ms linear infinite;
}
}
}
}
.shadow {
position: absolute;
width: 300px;
height: 40px;
background: #ddd;
border-radius: 999px;
transform: rotateX(90deg) translateX(-150px) translateZ(-92px);
// filter: blur(10px);
}
.bike {
position: relative;
&_body {
&_pedal {
position: absolute;
transform-origin: -28px 54px;
animation: tire $rotateSpeed linear infinite;
.arm_a {
position: absolute;
transform: rotateZ(0deg) translateZ(8px) translateX(-30px) translateY(50px);
.bike_body_frame_side_a {
position: absolute;
height: 30px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 30px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
.arm_b {
position: absolute;
transform: rotateZ(0deg) translateZ(-12px) translateX(-30px) translateY(28px);
.bike_body_frame_side_a {
position: absolute;
height: 30px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 30px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
.pedal_a {
position: absolute;
top: 28px;
left: -3px;
transform-origin: 5px 0px;
animation: pedalA $rotateSpeed linear infinite;
.bike_body_frame_side_a {
position: absolute;
height: 20px;
width: 10px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 4px;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
right: 0;
width: 4px;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 20px;
width: 10px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 10px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 10px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
.pedal_b {
position: absolute;
top: 0px;
left: -3px;
transform-origin: 5px 0px;
animation: pedalB $rotateSpeed linear infinite;
.bike_body_frame_side_a {
position: absolute;
height: 20px;
width: 10px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 4px;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
right: 0;
width: 4px;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 20px;
width: 10px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 10px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 10px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
}
&_saddle {
position: absolute;
transform: translateX(-80px) translateY(-50px);
.bike_body_saddle_side_a {
position: absolute;
width: 40px;
height: 20px;
background: #000;
transform: rotateX(90deg);
&::before {
content: '';
position: absolute;
top: 0;
width: 40px;
height: 6px;
background: #333;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 40px;
height: 6px;
background: #333;
transform-origin: 0 6px;
transform: rotateX(90deg);
}
}
.bike_body_saddle_side_b {
position: absolute;
width: 40px;
height: 20px;
background: #000;
transform: rotateX(90deg) translateZ(-6px);
&::before {
content: '';
position: absolute;
left: 0;
width: 6px;
height: 20px;
background: #666;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
right: 0;
width: 6px;
height: 20px;
background: #666;
transform-origin: 6px 0;
transform: rotateY(90deg);
}
}
}
&_rear {
.arm_a {
position: absolute;
transform: rotateZ(28deg) translateZ(4px) translateX(-60px) translateY(4px);
.bike_body_frame_side_a {
position: absolute;
height: 90px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 90px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
.arm_b {
position: absolute;
transform: rotateZ(28deg) translateZ(-8px) translateX(-60px) translateY(4px);
.bike_body_frame_side_a {
position: absolute;
height: 90px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 90px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 12px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(-90deg);
}
}
}
.arm_c {
position: absolute;
transform: rotateZ(90deg) translateZ(4px) translateX(53px) translateY(26px);
.bike_body_frame_side_a {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
.arm_d {
position: absolute;
transform: rotateZ(90deg) translateZ(-8px) translateX(53px) translateY(26px);
.bike_body_frame_side_a {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
}
&_front {
position: absolute;
transform: rotateZ(-20deg) translateX(75px) translateY(-40px);
.bike_body_frame_1 {
position: absolute;
height: 65px;
width: 8px;
background: $frameColor1;
}
.bike_body_frame_2 {
position: absolute;
width: 30px;
height: 8px;
background: $frameColor1;
}
.side_a {
position: absolute;
transform: translateZ(4px);
.bike_body_frame_1 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(90deg);
}
&::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
}
.bike_body_frame_2 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
}
}
.side_b {
position: absolute;
transform: translateZ(-4px);
.bike_body_frame_1 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 100% 100%;
transform: rotateX(-90deg);
}
}
.bike_body_frame_2 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 100%;
transform: rotateX(-90deg);
}
}
}
.side_c {
transform: rotateY(90deg) translateX(-40px) translateZ(30px);
.bike_body_frame_side_a {
position: absolute;
width: 80px;
height: 8px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 100%;
transform: rotateX(-90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
width: 80px;
height: 8px;
background: $frameColor1;
transform: translateZ(8px);
&::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(90deg);
}
&::after {
content: '';
position: absolute;
right: 0;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(-90deg);
}
}
}
.arm_a {
position: absolute;
transform: translateZ(4px) translateX(2px) translateY(57px);
.bike_body_frame_side_a {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(90deg);
}
}
}
.arm_b {
position: absolute;
transform: translateZ(-8px) translateX(2px) translateY(57px);
.bike_body_frame_side_a {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(-90deg);
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
}
.bike_body_frame_side_b {
position: absolute;
height: 70px;
width: 4px;
background: $frameColor1;
transform: translateZ(4px);
&::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 4px;
height: 12px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(-90deg);
}
}
}
}
&_triangle {
position: absolute;
transform: rotateZ(80deg) translateX(-35px) translateY(-75px);
.bike_body_frame_1 {
position: absolute;
height: 130px;
width: 8px;
background: $frameColor1;
transform-origin: 100% 0;
transform: rotateZ(-36.5deg);
}
.bike_body_frame_2 {
height: 120px;
width: 8px;
background: $frameColor1;
}
.bike_body_frame_3 {
position: absolute;
bottom: 0;
height: 8px;
width: 97px;
background: $frameColor1;
transform: rotateZ(-10deg) translateX(-10px);
}
.side_a {
position: absolute;
transform: translateZ(4px);
.bike_body_frame_1 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(90deg);
}
&::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
}
.bike_body_frame_2 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(90deg);
}
&::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
}
.bike_body_frame_3 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 0 0;
transform: rotateY(90deg);
}
}
}
.side_b {
position: absolute;
transform: translateZ(-4px);
.bike_body_frame_1 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(-90deg);
}
}
.bike_body_frame_2 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 100% 0;
transform: rotateY(90deg);
}
&::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(-90deg);
}
}
.bike_body_frame_3 {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $frameColor2;
transform-origin: 0 100%;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
right: 0;
width: 8px;
height: 8px;
background: $frameColor2;
transform-origin: 100% 100%;
transform: rotateY(90deg);
}
}
}
}
}
&_tire {
&_frame {
position: absolute;
width: 10px;
height: 60px;
border-top: 10px solid #000;
// border-right: 1px solid #000;
// border-bottom: 1px solid #000;
// border-left: 1px solid #000;
border-radius: 0 0 99px 99px;
transform-origin: 5px 55px;
&:nth-child(2n) {
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
@for $i from 0 through 36 {
&:nth-child(#{$i + 1}) {
transform: rotateZ(#{$i * 10}deg);
}
}
}
.side_a {
transform: translateZ(3px);
.bike_tire_frame {
&::before {
content: '';
position: absolute;
top: -10px;
width: 10px;
height: 6px;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 30%,rgba(68,68,68,1) 70%,rgba(0,0,0,1) 100%);
transform-origin: 50% 0%;
transform: rotateX(-90deg);
}
&::after {
content: '';
position: absolute;
top: -4px;
width: 10px;
height: 4px;
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
transform: translateZ(0.1px);
}
}
}
.side_b {
transform: translateZ(-3px);
.bike_tire_frame {
&::before {
content: '';
position: absolute;
top: 0px;
width: 10px;
height: 6px;
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
transform-origin: 50% 0%;
transform: rotateX(90deg);
}
&::after {
content: '';
position: absolute;
top: -4px;
width: 10px;
height: 4px;
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
transform: translateZ(-0.1px);
}
}
}
.side_c {
.bike_tire_frame {
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid silver;
&:nth-child(even) {
border: none;
}
}
}
&.front {
transform: translateX(100px);
}
&.rear {
transform: translateX(-100px);
}
.rotate_tire {
transform-origin: 5px 55px;
animation: tire $rotateSpeed linear infinite;
}
}
}
}
@keyframes run {
0% {
transform: rotateX(-30deg) rotateY(0deg);
}
50% {
transform: rotateX(10deg) rotateY(-180deg);
}
100% {
transform: rotateX(-30deg) rotateY(-360deg);
}
}
@keyframes tire {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes pedalA {
0% {
transform: rotateZ(0deg) rotateX(90deg) translateY(4px);
}
100% {
transform: rotateZ(-360deg) rotateX(90deg) translateY(4px);
}
}
@keyframes pedalB {
0% {
transform: rotateZ(0deg) rotateX(-90deg) translateY(0px);
}
100% {
transform: rotateZ(-360deg) rotateX(-90deg) translateY(0px);
}
}
@keyframes wind {
0% {
transform: translateY(-300px);
}
100% {
transform: translateY(200px);
}
}
Also see: Tab Triggers