Results show
Hello everyone, this is Yearth, welcome to 10 mins CSS, spend 10 minutes a day to achieve a simple and beautiful CSS effect.
So let’s get straight to the point. Let’s take a look at today’s results:
Analysis of the
I believe that after the previous several times of analysis, we are already familiar with the road, so no nonsense, directly start to analyze the key point to achieve this effect:
- We need to fluoresce the cube, which we can use
box-shadow - If you watch carefully, you can see that the block is “ungrounded” after being flipped. We can adjust this with animation and rotate
- The floor has a mirror effect, which can be achieved with -webkit-box-reflect
These are the general key points, but other details can be discussed in the implementation.
Coding
Now that I know what I’m thinking, it’s time for fun coding, starting with implementing a fluorescent cube.
Fluorescent diamonds
The principle is very simple. We know that box-shadow can be superimposed indefinitely, so we can repeat the shadow around the box that keeps getting lighter:
:root {
--bg-color: # 000000;
--cube-color: #03e9f4;
}
body {
width: 100%;
height: 100vh;
background: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
}
.cube {
height: 200px;
width: 200px;
background: var(--cube-color);
box-shadow: 0 0 5px rgba(3.233.244.1),
0 0 25px rgba(3.233.244.1),
0 0 50px rgba(3.233.244.1),
0 0 100px rgba(3.233.244.1),
0 0 200px rgba(3.233.244.0.5),
0 0 300px rgba(3.233.244.0.5);
}
Copy the codeThe effect is as follows:
The rolling square
There are two keys to getting the cube to roll:
- Let the cube rotate
- Move the fulcrum of the animation to the lower right corner of the box
This is very simple, directly implement:
.cube {
/ *... * /
+ animation: cubeClimb 1.5 s ease-in-out infinite;
+ transform-origin: bottom right;
}
@keyframes cubeClimb {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
Copy the codeThe effect is as follows:
Once the roll is done, it’s time to consider the details of how the block is a little “wobbly” after the roll.
As we know, the rebound Angle should be smaller and smaller in general, so data such as 85 and 87.5 can be used to simulate this effect:
@keyframes cubeClimb {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(90deg);
}
65% {
transform: rotate(85deg);
}
70% {
transform: rotate(90deg);
}
75% {
transform: rotate(87.5 deg);
}
80%,
100% {
transform: rotate(90deg);
}
}
Copy the codeThe effect is as follows:
At this point, some readers may think: although the cube has been able to roll, but after each turn will reset to the original position, can not be continuous.
Don’t worry, there’s only so much you can do for the other block. To make the animation continuous, we can act like an adhesive tape and make the background move with it:
.box {
display: flex;
justify-content: center;
width: 100%;
animation: moveFloor 1.5 s ease-in-out infinite;
}
@keyframes moveFloor {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-200px);
}
}
Copy the codeThe effect is as follows:
The floor
All it takes is one line of code:
.box {
/ *... * /
+ -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}
Copy the codeThe effect is as follows:
It’s in the back
At this point, the whole effect has been achieved, but there is still a problem: how to make the square diagonal climb the net?
This question is not answered in this article, interested readers can try it, but also digest and understand some.
So that’s all for today. Thank you for reading, and please point out any errors.
Finally, here’s the online demo: Fluorescent block climbing effect