Rolling Circle

Developer
Ty Strong
Size
1,942 Kb
Views
32,384
  1. Rolling Circle Previews
  2. Rolling Circle HTML Codes
  3. Rolling Circle CSS Codes

How do I make an rolling circle?

You can hover and click the box to see how it works!. What is a rolling circle? How do you make a rolling circle? This script and codes were developed by Ty Strong on 11 August 2022, Thursday.

Rolling Circle Previews
IQ Test

Rolling Circle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rolling Circle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <box> <p>Hover and click the box to see how it works!</p> <rotate> <circle></circle> </rotate>
</box>
</body>
</html>

Rolling Circle - Script Codes CSS Codes

body, html { width: 100%; height: 100%; margin: 0; background: #333;
}
box { position: absolute; width: 500px; height: 500px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-transition: 400ms; transition: 400ms; -webkit-perspective: 800; perspective: 800; background: #111;
}
rotate { position: absolute; width: 300px; height: 500px; top: 0; right: 0; left: 0; margin: auto; -webkit-animation: rotate 2.5s reverse linear infinite; animation: rotate 2.5s reverse linear infinite;
}
circle { position: absolute; width: 300px; height: 300px; background: white; /** border: solid 150px; border-color: red blue green yellow; **/ background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42863/Quarter_1.jpg); background-size: cover; border-radius: 50%; -webkit-animation: spin 2.5s linear infinite; animation: spin 2.5s linear infinite;
}
box:hover rotate {-webkit-animation-play-state: paused;animation-play-state: paused;border:solid 1px #f00;}
box:active rotate {-webkit-animation-play-state: running;animation-play-state: running;border:solid 1px #f00;}
@-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes spin { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes rotate { 0% {-webkit-transform: rotate(0deg) rotateX(40deg);transform: rotate(0deg) rotateX(40deg);} 100% {-webkit-transform: rotate(360deg) rotateX(40deg);transform: rotate(360deg) rotateX(40deg);}
}
@keyframes rotate { 0% {-webkit-transform: rotate(0deg) rotateX(40deg);transform: rotate(0deg) rotateX(40deg);} 100% {-webkit-transform: rotate(360deg) rotateX(40deg);transform: rotate(360deg) rotateX(40deg);}
}
p { color: white; font-family: helvetica, arial, serif; text-align: center;
}
Rolling Circle - Script Codes
Rolling Circle - Script Codes
Home Page Home
Developer Ty Strong
Username tystrong
Uploaded August 11, 2022
Rating 3.5
Size 1,942 Kb
Views 32,384
Do you need developer help for Rolling Circle?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ty Strong (tystrong) Script Codes
Name
Beautiful Round Shadow
8-Bit Mario
The Greatest.
RADICAL
Info on Hover
CSS Spinner
Another No Div Spinner
Added new link buttons.
Updated Personal Page
Logo with Slim and SCSS
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!