A Pen by Adam Doherty on CodePen.
Created
November 6, 2019 05:36
-
-
Save CodeMyUI/ed4a1a5e77fd690371baa1d286e48cf9 to your computer and use it in GitHub Desktop.
Loop the Loop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="loop" class="center"></div> | |
<div id="bike-wrapper" class="center"> | |
<div id="bike" class="centerBike"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background: black; | |
overflow: hidden; | |
} | |
.centerBike { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-top: 26px; | |
margin-left: -12px; | |
} | |
.center { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-top: -50px; | |
margin-left: -50px; | |
} | |
#loop { | |
height: 100px; | |
width: 100px; | |
border: #bb5f27 solid 4px; | |
border-radius: 200px; | |
} | |
#loop:before { | |
background: -moz-linear-gradient(left, rgba(187, 95, 39, 0) 0%, rgba(187, 95, 39, 1) 30%, rgba(187, 95, 39, 1) 70%, rgba(187, 95, 39, 0) 100%); | |
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(187, 95, 39, 0)), color-stop(30%, rgba(187, 95, 39, 1)), color-stop(70%, rgba(187, 95, 39, 1)), color-stop(100%, rgba(187, 95, 39, 0))); | |
background: -webkit-linear-gradient(left, rgba(187, 95, 39, 0) 0%, rgba(187, 95, 39, 1) 30%, rgba(187, 95, 39, 1) 70%, rgba(187, 95, 39, 0) 100%); | |
background: -o-linear-gradient(left, rgba(187, 95, 39, 0) 0%, rgba(187, 95, 39, 1) 30%, rgba(187, 95, 39, 1) 70%, rgba(187, 95, 39, 0) 100%); | |
background: -ms-linear-gradient(left, rgba(187, 95, 39, 0) 0%, rgba(187, 95, 39, 1) 30%, rgba(187, 95, 39, 1) 70%, rgba(187, 95, 39, 0) 100%); | |
background: linear-gradient(to right, rgba(187, 95, 39, 0) 0%, rgba(187, 95, 39, 1) 30%, rgba(187, 95, 39, 1) 70%, rgba(187, 95, 39, 0) 100%); | |
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00bb5f27', endColorstr='#00bb5f27', GradientType=1); | |
content: ""; | |
display: block; | |
height: 4px; | |
left: -100px; | |
position: relative; | |
top: 100px; | |
width: 300px; | |
} | |
#bike-wrapper { | |
height: 108px; | |
width: 108px; | |
animation: drive 3s linear infinite; | |
} | |
#bike { | |
height: 24px; | |
width: 25px; | |
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/motorbike.png"); | |
} | |
@keyframes drive { | |
0% { | |
margin-left: -364px; | |
opacity: 0; | |
} | |
33.33% { | |
transform: rotate(0deg); | |
margin-left: -50px; | |
opacity: 1; | |
} | |
66.66% { | |
transform: rotate(-360deg); | |
margin-left: -50px; | |
opacity: 1; | |
} | |
100% { | |
margin-left: 264px; | |
transform: rotate(-360deg); | |
opacity: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment