In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-23 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly introduces "how to create animation with bounce effects in CSS3". In daily operation, I believe many people have doubts about how to create animation with bounce effects in CSS3. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "how to create animation with bounce effects in CSS3". Next, please follow the editor to study!
Did you know that elements that use the CSS transform attribute to add to HTML can be animated. We can use the transition property and @ keyframe animation to achieve this effect, but what's even cooler is that we can use the timing function of cubic-bezier () to add some bounce effects to the animation to make it look better.
In a nutshell, cubic-bezier () in CSS is a timing function used to create transition effects. It can define the speed of the transition and other indicators, and it can also be used to create bounce effects in animation.
In this article, we will first create a simple transformation animation, and then we will add cubic-bezier () to it. After reading this article, you will learn how to create an animation that uses both fan out and bounce effects.
1.? Make fan blades
The fan out effect is made up of five blades. We need to use the border-radius property of CSS to make these blades. Please refer to the following figure for details:
There are many different syntax for fillet properties. Here we will use a more complex syntax:
Border-radius: htl htr hbr hbl / vtl vtr vbr vbl
In this syntax, the horizontal and vertical radii are put together; h and v represent the horizontal and vertical radii, respectively, and t, l, b, and r represent the top (top), the left (left), the bottom (bottom), and the right (right), respectively. For example, the longitudinal radius of the lower left corner represented by vbl.
If you set only one value for the horizontal or vertical radius, the browser will copy that value to all other horizontal or vertical radii.
To make a vertical oval shape, you need to keep the transverse radius 50% proportional on all corners, and then adjust the longitudinal radius until you have a satisfactory shape. The horizontal radius uses only one value: 50%.
In the upper left and upper right corner, the longitudinal radius is 30%, and in the lower left and lower right corner, the longitudinal radius is 70%.
HTML
CSS
.pinStarLeaf {width:60px; height:120px; border-radius:50%/30% 30% 70% 70%; background-color:#B8F0F5;}
two。 Expand the number of blades
Since the fan-out effect requires 5 blades, we need to make 4 more blades and assign them different colors. In addition, we also need to specify an absolute positioning (absolute positioning) so that the five blades overlap at the end of the animation.
HTML
CSS
# pinStarWrapper {width:300px; height:300px; position:relative;}
.pinStarLeaf {width:60px; height:120px; position:absolute; border-radius:50%/30% 30% 70% 70%; left:0; right:0; top:0; bottom:0; margin:auto; opacity:.5;}
.pinStarLeaf: nth-of-type (1) {background-color:#B8F0F5;}
.pinStarLeaf: nth-of-type (2) {background-color:#9CF3DC;}
.pinStarLeaf: nth-of-type (3) {background-color:#94F3B0;}
.pinStarLeaf: nth-of-type (4) {background-color:#D2F8A1;}
.pinStarLeaf: nth-of-type (5) {background-color:#F3EDA2;}
3. Identify user click behavior and improve aesthetic effect
We will use the # pinStarCenterChkBox identifier to add a checkbox to capture the user's click behavior. When checkbox is selected, the fan out effect appears immediately (the blade starts to rotate). We also use the # pinStarCenter identifier to add a white prototype to improve the aesthetic effect. This prototype should be placed at the center of the fan-out effect.
HTML
We will first place the checkbox, followed by the white circles and blades:
CSS
# pinStarCenter, # pinStarCenterChkBox {width:45px; height:50px; position:absolute; left:0; right:0; top:-60px; bottom:0; margin:auto; background-color:#fff; border-radius:50%; cursor:pointer;}
# pinStarCenter, .pinStarLeaf {pointer-events:none;}
# pinStarCenter > input [type= "checkbox"] {width:100%; height:100%; cursor:pointer;}
Since each blade rotates along the z-axis at a different angle, we need to make a transition for them: rotatez ();. We will also apply the transition attribute to the rotation property.
# pinStarCenterChkBox:checked-.pinStarLeaf {transition:transform 1s linear;}
# pinStarCenterChkBox:checked-.pinStarLeaf: nth-of-type (5) {transform:rotatez (35deg);}
# pinStarCenterChkBox:checked-.pinStarLeaf: nth-of-type (4) {transform:rotatez (105deg);}
# pinStarCenterChkBox:checked-.pinStarLeaf: nth-of-type (3) {transform:rotatez (180deg);}
# pinStarCenterChkBox:checked-.pinStarLeaf: nth-of-type (2) {transform:rotatez (255deg);}
# pinStarCenterChkBox:checked-.pinStarLeaf: nth-of-type (1) {transform:rotatez (325deg);}
If you take a closer look at the CSS code above, you will see # pinStarCenterChkBox:checked-this identifier, the animation will not begin until the checkbox is checked (that is, after the user clicks it).
4. Change the center of the rotation
By default, the center of the rotation is in the middle of the rotation element. But in our effect, it should be at the center of all the blades, so we need to move it. We can use the transform-orgin attribute of CSS to do this.
In order for the rotation effect to work properly, we need to add the following two rules to the .pinStarLeaf selector in the CSS file:
.pinStarLeaf {transform-origin:30px 30px; transition:transform 1s linear;}
So far, the rotation effect has been done, but the animation does not use the bounce effect.
Now to add bounce effects, we need to replace the current timing function with cubic-bezier ().
But first, to better understand what bounce effects are, let's try to understand how the timing function cubic-bezier () works.
The syntax of cubic-bezier () is like this. D and t represent distance (distance) and time (time), respectively, and their values are usually numbers between 0 and 1:
Cubic-bezier (T1, D1, T2, D2)
Although it is not very accurate to use words such as distance and time to explain cubic-bezier () in CSS, it is easier to understand when we say so.
Suppose there is a box that can move from point A to point B in 6 seconds. We use the following cubic-bezier () to achieve this transition, so that T1 is 0 and d1 is the same.
Cubic-bezier (0meme1pd0p0p0pl)
The box will move from point A to the middle point almost immediately, and then spend the rest of the time moving to point B.
Now let's have a look at the effect of the transition.
You will find that for the first 3 seconds, the box barely moves, then it jumps almost directly to the middle point, and then moves steadily to point B.
As you may have noticed, D1 controls the distance from point A to the middle point, and T1 controls the time taken from point A to the middle point.
Now let's add D2 and T2. Make the values of T1 and D1 equal to 1, and make T2, d2pm, d2zero. The box will make a steady transition to the midpoint in the first three seconds (because t _ 1 is not 1) and then jump to point B immediately.
Now let's remove the values of T2 and D2.
The box will make a steady transition to the midpoint in the first three seconds (because t _ 1 ~ 1 ~ 1), then stop for nearly 3 seconds, and then jump to point B immediately.
In other words, D2 and T2 control the distance and time of the box from the middle point to point B, respectively.
5. Use Cubic-Bezier () to add bounce effects
When using bounce effects, the most important parameter is distance, that is, D1 and D2. When the value of D1 is less than 1, it causes the box to fall back before point A before moving to point B.
When the value of D2 is greater than 1, it will make the box reach point B, then go beyond point B for some distance, and then finally return to point B to rest. I will now add the value of cubic-bezier () directly to the code so that you can see the final effect.
# pinStarCenterChkBox:checked-.pinStarLeaf {transition:transform 1s cubic-bezier
At this point, the study of "how to create an animation with bounce effects in CSS3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.