.road
img.car(src="https://assets.codepen.io/605876/little-red-car.png" alt="Little red car")
View Compiled
*
box-sizing border-box
:root
--road hsl(220, 8%, 50%)
--grass hsl(90, 40%, 50%)
--island hsl(45, 40%, 50%)
--lines hsl(45, 80%, 90%)
@property --x
inherits false
initial-value -22.5
syntax '<number>'
@property --y
inherits false
initial-value 0
syntax '<number>'
@property --r
inherits false
initial-value 0deg
syntax '<angle>'
body
min-height 100vh
display grid
place-items center
background var(--grass)
.car
animation journey 5s infinite linear
transform translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vmin)) rotate(var(--r))
width 3vmin
object-fit cover
.road
height 50vmin
width 50vmin
border-radius 12.5%
border 5vmin solid var(--road)
background var(--road)
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
&:before
content ''
position absolute
height 44vmin
width 44vmin
border-radius 11%
border 0.5vmin dashed var(--lines)
top 50%
left 50%
transform translate(-50%, -50%)
&:after
content ''
position absolute
height 40vmin
width 40vmin
background var(--island)
top 50%
left 50%
transform translate(-50%, -50%)
border-radius 10%
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.