CSS xe đạp xoay bánh

  Bài viết hay nhất1
HTML (Pug):

.bike
.wheel
.rim
- for(var i = 0; i < 61; i++)
.two
.spokes
- for(var x = 0; x < 61; x++)
.line
.wheel.second
.rim
- for(var i = 0; i < 61; i++)
.two
.spokes
- for(var x = 0; x < 61; x++)
.line
.circleone
.circletwo
.wheelbar
.wheelbarangled
.gears
.pedal
.seatbar
.mainbar
.crossbar
.frontwheelbar
.steeringwheel
.seat



CSS (Sass) :

$primary: #DA635D

@mixin circles
position: absolute
background: gray
border-radius: 100%
height: 55px
width: 55px
border: 1px solid black
z-index: -1

body
background: peachpuff

.bike
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)

@for $y from 1 to 61
.line:nth-child(#{$y})
transform: rotate(#{$y*6}deg)
height: 75px
width: 2px
background: gray
transform-origin: 0px 100px
position: absolute


@for $n from 1 to 62
.two:nth-child(#{$n})
transform: rotate(#{$n*6}deg)
background: black
height: 12px
width: 12px

.spokes
position: absolute
top: 1px
left: 101px

.rim
position: absolute
height: 202px
width: 202px
background: transparent
margin-left: 90px
border-radius: 100%
border: 13px solid $primary
animation: rotate 9s linear infinite
// &:after
// content: ''
// position: absolute
// background: gray
// border-radius: 100%
// height: 55px
// width: 55px
// left: 72px
// top: 72px
// border: 1px solid black
// z-index: -1


.circleone
+circles
top: 83px
left: 175px

.circletwo
+circles
right: 220px
top: 83px

.wheelbar
height: 115px
width: 11px
position: absolute
background: $primary
transform: rotate(90deg)
right: 164px
top: 54px
border-radius: 5px
z-index: -2


.wheelbarangled
height: 142px
width: 12px
position: absolute
transform: rotate(65deg)
background: $primary
border-radius: 5px
top: -7px
right: 162px
z-index: -2

@keyframes rotate
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)

.wheel
z-index: -3
position: absolute

.wheel.second
position: absolute
right: 450px
top: 0px
z-index: -3

.two
transform-origin: 125px
position: absolute
left: -24px
top: 95px

.gears
position: absolute
height: 55px
width: 55px
background: gray
border-radius: 100%
top: 83px
right: 67px
border: 2px solid black

.pedal
position: absolute
width: 55px
height: 8px
background: black
transform: rotate(-35deg)
transform-origin: left center
top: 21px
left: 23px
animation: pedal 2s ease-out infinite
&:after
content: ''
position: absolute
display: block
background: black
height: 10px
width: 35px
transform: rotate(35deg)
transform-origin: center center
top: -3px
left: 39px
animation: rotate1 2s linear infinite
@keyframes rotate1
100%
transform: rotate(180deg)


.seatbar
position: absolute
width: 15px
height: 203px
background: $primary
transform: rotate(-12deg)
right: 114px
z-index: -3
top: -116px

.mainbar
position: absolute
background: $primary
height: 352px
width: 23px
transform: rotate(45deg)
top: -175px
z-index: -3
left: -5px

.crossbar
position: absolute
height: 12px
width: 200px
background: $primary
right: -70px
top: -50px
transform: rotate(-5deg)

.frontwheelbar
position: absolute
height: 267px
width: 13px
background: $primary
transform: rotate(-18deg)
top: -168px
left: 152px
z-index: -3

.steeringwheel
position: absolute
background: black
height: 13px
width: 80px
transform: rotate(-20deg)
top: -160px
left: 68px
&:after
content: ''
position: absolute
display: block
height: 13px
width: 80px
background: black
top: -25px
left: 5px
transform: rotate(38deg)

.seat
position: absolute
display: block
background: black
height: 30px
width: 92px
top: -135px
// border-top-right-radius: 100px 100px
// border-top-left-radius: 14px
// border-bottom-left-radius: 100px 100px
// border-bottom-right-radius: 10px
border-top-right-radius: 250px 100px
border-top-left-radius: 14px
border-bottom-left-radius: 100px 100px
border-bottom-right-radius: 15px
right: 92px

@keyframes pedal
100%
transform: rotate(325deg)
Bạn không có quyền trả lời bài viết