CSS Color Spin

Developer
Tamuna
Size
1,961 Kb
Views
6,072
  1. CSS Color Spin Previews
  2. CSS Color Spin HTML Codes
  3. CSS Color Spin CSS Codes

How do I make an css color spin?

Just one div and a lot of CSS styling to make a colorful spinning animation.. What is a css color spin? How do you make a css color spin? This script and codes were developed by Tamuna on 03 January 2023, Tuesday.

CSS Color Spin Previews
IQ Test

CSS Color Spin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Color Spin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> </head> <body> <div class="ball"></div> </body>
</html>
</body>
</html>

CSS Color Spin - Script Codes CSS Codes

body { background: white; perspective: 500;
}
.ball { font-size: 3.8em; text-align: center; text-shadow: 1px 1px white; color: #818181; background: grey; background: -webkit-radial-gradient(#ddd, grey); background: -moz-radial-gradient(#ddd, grey); background: -o-radial-gradient(#ddd, grey); background: radial-gradient(#ddd, grey); margin: 200px auto; width: 80px; height: 80px; border-radius: 100%; box-shadow: 150px 0 25px -20px DarkRed, 150px 0 25px -10px Red, -150px 0 25px -20px SkyBlue, -150px 0 25px -10px lightblue, 0 150px 25px -20px gold, 0 150px 25px -10px yellow, 0 -150px 25px -20px purple, 0 -150px 25px -10px Violet, 110px 110px 20px -30px orangered, 110px 110px 20px -20px orange, -110px 110px 20px -30px green, -110px 110px 20px -20px lawngreen, -110px -110px 20px -30px blue, -110px -110px 20px -20px cornflowerblue, 110px -110px 20px -30px hotpink, 110px -110px 20px -20px pink; -webkit-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite; animation: spin 3s linear infinite;
}
.ball:before { content: "\263A";
}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate3D(1,1,1, 0); } 25% { -webkit-transform: rotate3D(1,1,1, 90deg); } 50% { -webkit-transform: rotate3D(1,1,1, 180deg); } 75% { -webkit-transform: rotate3D(1,1,1, 270deg); } 100% { -webkit-transform: rotate3D(1,1,1, 360deg); }
}
@-moz-keyframes spin { 0% { -moz-transform: rotate3D(1,1,1, 0); } 25% { -moz-transform: rotate3D(1,1,1, 90deg); } 50% { -moz-transform: rotate3D(1,1,1, 180deg); } 75% { -moz-transform: rotate3D(1,1,1, 270deg); } 100% { -moz-transform: rotate3D(1,1,1, 360deg); }
}
@-o-keyframes spin { 0% { -o-transform: rotate3D(1,1,1, 0); } 25% { -o-transform: rotate3D(1,1,1, 90deg); } 50% { -o-transform: rotate3D(1,1,1, 180deg); } 75% { -o-transform: rotate3D(1,1,1, 270deg); } 100% { -o-transform: rotate3D(1,1,1, 360deg); }
}
@-keyframes spin { 0% { transform: rotate3D(1,1,1, 0);} 25% { transform: rotate3D(1,1,1, 90deg);} 50% { transform: rotate3D(1,1,1, 180deg);} 75% { transform: rotate3D(1,1,1, 270deg);} 100% { transform: rotate3D(1,1,1, 360deg);}
}
CSS Color Spin - Script Codes
CSS Color Spin - Script Codes
Home Page Home
Developer Tamuna
Username AlienPiglet
Uploaded January 03, 2023
Rating 3
Size 1,961 Kb
Views 6,072
Do you need developer help for CSS Color Spin?

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!

Tamuna (AlienPiglet) Script Codes
Name
Lime Form
Rainbow Fan
Canvas Night Sky
Monochrome Form
Starry Night of Markup
CSS DropDown Menu
CSS Clock
Simple Counter
Spin Around the Cursor
Rotating Menu
Create amazing blog posts 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!