zoukankan      html  css  js  c++  java
  • 【CSS】352- 有趣的CSS弹跳动画

    640?wx_fmt=png
    点击上方“前端自习课”关注,学习起来~

      这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。

    利用伪元素

      由于只使用了一个div,要同时达到正方形旋转与阴影缩放的效果,这里必须使用两个伪元素(before与after)来完成,严格来说,虽然只有一个div,但是却是把这个div当作外框,让伪元素before作为旋转的正方形,让伪元素after作为阴影。

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

    640?wx_fmt=jpeg


    CSS动画

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

    .box:before{	
    content:'';	
    position:absolute;	
    z-index:2;	
    top:60px;	
    left:50px;	
    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;	
    44px;	
    height:3px;	
    background:#eaeaea;	
    border-radius:100%;	
    -webkit-animation:shadow .8s infinite ; 	
    }	
    @-webkit-keyframes shadow{	
      0%,100%{	
    left:54px;	
    40px;	
    background:#eaeaea;	
      }	
      50%{	
    top:126px;	
    left:50px;   /*让阴影保持在原位*/	
    50px;	
    height:7px;	
    background:#eee;	
      }	
    }

    640?wx_fmt=gif

    加入旋转效果

      了解原理之后,我们只要再加上旋转的属性,就可以达到弹跳起来的时候有旋转的效果,不过这里又有用到一个小技巧,就是落下的时候是90度转到45度,弹上去的时候从45旋转到0度,然后在这一瞬间从0度变成90度(100%到0%),如此一来我们就会产生错觉,感觉好像一直在旋转了。

    @-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);	
      }	
    }

    640?wx_fmt=gif

      举一反三,我们也可以把角度反转,就会往另外一边弹跳

    640?wx_fmt=gif

      如果我们把动画里头添加linear,就会变成线性的连续方式喔。640?wx_fmt=gif

    via:https://segmentfault.com/a/119000001908691

    原创系列推荐



    4. 
    5. 
    6. 
    7. 

    640?wx_fmt=png
    点这,与大家一起分享本文吧~

    个人博客:http://www.pingan8787.com 微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。 目前已连续推送文章 600+ 天,愿每个人的初心都能一直坚持下去!
  • 相关阅读:
    Python中所有的关键字
    关于selenium的8种元素定位
    对提示框的操作
    selenium+webservice进行百度登录
    MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled...报错解决
    Vue中使用echarts
    npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142解决方法
    插入排序
    冒泡排序优化
    roject 'org.springframework.boot:spring-boot-starter-parent:XXX' not found 解决
  • 原文地址:https://www.cnblogs.com/pingan8787/p/11838085.html
Copyright © 2011-2022 走看看