Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use a div to make bouncing small animation in CSS3." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to use a div to make bouncing small animation in CSS3"!

Using pseudo-elements

Since only one div is used, in order to achieve the effect of square rotation and shadow scaling at the same time, two pseudo-elements (before and after) must be used to complete it. Strictly speaking, although there is only one div, this div is used as a frame, and the pseudo-element before is used as a rotated square, and the pseudo-element after is used as a shadow.

.box{ position:relative;}.box:before{ content:''; position:absolute; z-index:2; top:60px; left:50px; width:50px; height:50px; background:#c00; border-radius:2px; transform: rotate(45deg);}.box:after{ content:''; position:absolute; z-index:1; top:128px; left:52px; width:44px; height:3px; background:#eaeaea; border-radius:100%;}

CSS动画

画出正方形与阴影之后，再来就是要做动画了，为了避免太过复杂，这里我们先不要旋转，先单纯让正方形上下跳动，然后阴影会放大缩小，下面的示例的动画，又新增了20%与80%的keyframe，目的是为了让接触的时候角落才会变圆，不然就会变成刚开始移动时尖角就变圆，就会很怪异了。

.box:before{ content:''; position:absolute; z-index:2; top:60px; left:50px; width:50px; height:50px; background:#c00; border-radius:2px; transform: rotate(45deg); -webkit-animation:box .8s infinite ; }@-webkit-keyframes box{ 0%{ top:50px; } 20%{ border-radius:2px; /*从20%的地方才开始变形*/ } 50%{ top:80px; border-bottom-right-radius:25px; } 80%{ border-radius:2px; /*到80%的地方恢复原状*/ } 100%{ top:50px; }}.box:after{ content:''; position:absolute; z-index:1; top:128px; left:52px; width:44px; height:3px; background:#eaeaea; border-radius:100%; -webkit-animation:shadow .8s infinite ; }@-webkit-keyframes shadow{ 0%,100%{ left:54px; width:40px; background:#eaeaea; } 50%{ top:126px; left:50px; /*让阴影保持在原位*/ width:50px; height:7px; background:#eee; }}

Add rotation effect

After understanding the principle, we only need to add the attribute of rotation to achieve the effect of rotation when jumping up, but here is a small trick, which is to rotate from 90 degrees to 45 degrees when falling down, from 45 degrees to 0 degrees when bouncing up, and then from 0 degrees to 90 degrees (100% to 0%) in this instant, so that we will have the illusion that we feel as if we have been rotating.

@-webkit-keyframes box{ 0%{ top:50px; transform: rotate(90deg); /** / } 20%{ border-radius:2px; } 50%{ top:80px; transform: rotate(45deg); border-bottom-right-radius:25px; } 80%{ border-radius:2px; } 100%{ top:50px; transform: rotate(0deg);}} Specially established learning Q-q-u-n: ③ ④-③-Zero ①②, sharing learning methods and small details that need attention, constantly updating the latest tutorials and learning skills (from zero basis to front-end project actual combat tutorials, learning tools, full-stack development learning routes and planning) At this point, I believe that everyone has a deeper understanding of "how to use a div to make bouncing small animation in CSS3," you may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.