Hi, I’m Steven.
In this episode, we’re going to do a dice roll. Wait, this is easy? So the challenge is to do it with CSS instead of JavaScript, and let’s see how that works.
This video version of the tutorial at www.bilibili.com/video/BV1Po… , welcome the attention of three companies!
Material preparation
First, we need to prepare a picture:
Inside is a panel of dice from one to six, and I’m going to mess up the order of dice from one to six just to make it look random when I roll the dice.
Part of the HTML
Open the CodePen editor and add a
Part of the CSS
Then go to the CSS section, add the Body selector, and use Flexbox to center the content up, down, left, and right. Then add the.dice selector and set the dice image we prepared just now to 366px width and height. Since our dice image is horizontal, the background-position is 0% and 100%.
For example, we change the value of x to 100% :
I’ll change it to the last number (four) and change it back to 0%.
Okay, so how do we roll the dice? Add @keyFrames Random to define an animation that sets background-position to 0% 100% for the block from and 100% 100% for the block to.
Since the definition in the from block is the same as that in.dice, we can omit the from block here and set the animation to.2s with linear acceleration, random animation name and infinite repetition.
Now you can see that the dice rotate continuously in the horizontal direction, but this is not like the effect of rolling dice. Therefore, the key point here is that the animation can specify the number of squares to proceed, and replace linear acceleration with steps(5, start). Steps (6, jump-None) to see the dice roll one by one.
Ok, so the next step is to deal with the logic of the dice roll. Without JavaScript, we can implement on-on-off logic using the form element checkbox.
Modify the HTML section and add a checkbox with the ID dice. Add a
So when we click the dice, we can trigger the checkbox click.
In the CSS section, add the #dice selector, set display to None, and hide the checkbox. New #dice: Checked + label. dice selector, which controls the.dice style of the label behind it when the checkbox is checked.
So what can we do here? Pause the animation and set animation-play-state to paused.
Now the effect of random results has been realized.
Then when rolling the dice, add a layer of decoration on the top of the dice.
Add the.dice::before selector and set content to question mark and background color to 80% opacity white. The width and height are inherited from the parent element and set to inherit, display to flex, and context-content and align-items to Center.
I’m going to make the background blur, add backdrop filter, set it to blur(20px), and add -webkit. Set rounded border-radius to 60px.
Finally, hide the question mark layer when displaying the dice results. Add the #dice:checked + label. dice::before selector and set display to None.
Let’s look at the completion of this case
And that’s all for this time.
The source code for this case is at codepen. IO /stevenlei/p…
Your support is my motivation, please pay attention to CodingStartup at least class, we come together!
- B station: space.bilibili.com/451368848
- YouTube: youtube.com/codingstart…
- The Denver nuggets: juejin. Cn/user / 249773…