Colorful box - CSS3 Trick

Developer
Keremciu
Size
2,015 Kb
Views
42,504
  1. Colorful box - CSS3 Trick Previews
  2. Colorful box - CSS3 Trick HTML Codes
  3. Colorful box - CSS3 Trick CSS Codes
  4. Colorful box - CSS3 Trick JS Codes

How do I make an colorful box - css3 trick?

It has one color but animation is colorful. How did it happen? Click and see it.. What is a colorful box - css3 trick? How do you make a colorful box - css3 trick? This script and codes were developed by Keremciu on 31 July 2022, Sunday.

Colorful box - CSS3 Trick Previews
IQ Test

Colorful box - CSS3 Trick - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colorful box - CSS3 Trick</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Let's hover box</p>
<a class="box">Box</a> <script src="js/index.js"></script>
</body>
</html>

Colorful box - CSS3 Trick - Script Codes CSS Codes

body { font-family: Helvetica,Helvetica Neue,Arial;
}
p { text-align:center; color:#999;
}
.box { margin-top: -100px; margin-left: -100px; position: absolute; top: 50%; left: 50%; height:200px; width:200px; background:#EE3522; display:block; text-align:center; line-height:200px; color:white; font-size:36px; -webkit-transition:0.5s ease-out;-moz-transition: 0.5s ease-out;-o-transition: 0.5s ease-out;-ms-transition: 0.5s ease-out;transition:0.5s ease-out; border-radius:40%;
}
.box:hover { -webkit-transform: translateZ(0) rotate(360deg);-webkit-filter: hue-rotate(360deg);transform: translateZ(0) rotate(360deg); border-radius:100%;
}

Colorful box - CSS3 Trick - Script Codes JS Codes

/*
This is a CSS3 Trick for your buttons, boxes.
@keremciu
* Box has one color but animation is colorful!
- translateZ(0) value, need for retina displays. Don't forget it.
-------------------------------------
Also I used it this:
http://keremciu.com/connect
hover the social icons and see animation.
*/
Colorful box - CSS3 Trick - Script Codes
Colorful box - CSS3 Trick - Script Codes
Home Page Home
Developer Keremciu
Username keremciu
Uploaded July 31, 2022
Rating 3
Size 2,015 Kb
Views 42,504
Do you need developer help for Colorful box - CSS3 Trick?

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!

Keremciu (keremciu) Script Codes
Name
Material Design App - Animated Tabs
Pointr Logo Animation
Test Logo Animation
Create amazing sales emails 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!