CSS3怎么创建带有反弹特效的动画

发布时间:2022-03-09 16:17:45 作者:iii
来源:亿速云 阅读:128

这篇文章主要介绍“CSS3怎么创建带有反弹特效的动画”,在日常操作中,相信很多人在CSS3怎么创建带有反弹特效的动画问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3怎么创建带有反弹特效的动画”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

  你知道吗,那些使用CSS transform属性添加进HTML的元素是可以实现动画效果的。我们可以使用transition属性和@keyframe动画来实现这个效果,但是更炫酷的是,我们可以使用cubic-bezier()这个timing function,给动画添加一些反弹特效,从而让它看上去更好看。

  简单来说,CSS中的cubic-bezier(),就是一个用来创建过渡效果的timing function。它可以定义过渡的速度和其他一些指标,它也可以用来创建动画中的反弹特效。

  在这篇文章中,我们首先将会创建一个简单的变换动画,然后我们给它添加cubic-bezier()。在读完这篇文章之后,你将会了解如何创建一个同时使用了扇出效果和反弹特效的动画。

  1.?制作扇叶

  这个扇出效果是由5个扇叶所组成的。我们需要使用CSS的圆角(border-radius )属性来制作这些扇叶。具体请参看下图:

  圆角属性有很多种不同的语法。在这里我们将会使用一种比较复杂的语法:

  border-radius: htl htr hbr hbl / vtl vtr vbr vbl;

  在这个语法中,横向和纵向的半径被放在了一起;h和v分别代表了横向半径和纵向半径,t、l、b和r分别代表的是顶部(top)、左侧(left)、底部(bottom)和右侧(right)。例如,vbl代表的左下角的纵向半径。

  如果你给横向或是纵向半径只设定了一个值,那么浏览器会将这个值复制到其他所有的横向或是纵向半径。

  为了做出竖直的椭圆形状,你需要在所有角上让横向半径保持50%的比例,然后调节纵向半径,直到你获得了满意的形状。横向半径只会使用一个值:50%。

  左上角和右上角上,纵向半径为30%,左下角和右下角上,纵向半径的值为70%。

  HTML

  CSS

  .pinStarLeaf { width:60px; height:120px; border-radius:50%/30% 30% 70% 70%; background-color:#B8F0F5; }

  2. 扩大扇叶数量

  由于扇出效果需要5个扇叶,因此我们还需要再制作4个扇叶,并且为他们指定不同的颜色。除此之外,我们还需要指定一个绝对定位(absolute positioning),让5个扇叶在动画结束的时候重叠在一起。

  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. 识别用户点击行为,改进美学效果

  我们要使用#pinStarCenterChkBox这个识别符来添加一个checkbox,从而捕捉用户的点击行为。当checkbox被选中之后,扇出效果会马上呈现(扇叶开始旋转)。我们还要用#pinStarCenter识别符来添加一个白色的原型,从而提升美学效果。这个原型要放在扇出效果的最中心。

  HTML

  我们要先放置checkbox,然后是白色的圆和扇叶:

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

  由于每一个扇叶都要按照不同的角度沿z轴旋转,因此我们要为它们制定好过渡:rotatez();。我们还要给旋转特性应用transition属性。

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

  仔细看看上面的CSS代码,你会发现#pinStarCenterChkBox:checked ——这个识别符,只有在checkbox被勾选之后(也就是用户点击之后),动画效果才会开始。

  4. 对旋转的中心进行修改

  默认情况下,旋转的中心位于旋转元素的中间。但是在我们的效果中,它应该位于所有扇叶的中心点,因此我们需要对其进行移动。我们可以使用CSS的transform-orgin属性来实现这个目的。

  为了让旋转特效正常工作,我们要在CSS文件中的.pinStarLeaf选择器中添加下面两条规则:

  .pinStarLeaf{ transform-origin:30px 30px; transition:transform 1s linear; }

  截止到目前为止,旋转特效已经做出来了,但是这个动画还没有使用反弹特效。

  现在我们来添加反弹特效,我们需要将现行的timing function替换为cubic-bezier()。

  但是首先,为了更好的了解什么是反弹特效,我们先来试着了解一下cubic-bezier()这个timing function的工作方式。

  cubic-bezier()的语法是这样的,d和t分别代表了距离(distance)和时间(time),他们的值通常是0到1之间的数字:

  cubic-bezier (t1, d1, t2, d2)

  虽然用距离和时间这样的词汇来解释CSS中的cubic-bezier()并不是非常精确,但是这样说的时候我们比较容易理解。

  假设存在一个能在6秒内从A点移动到B点的盒子。我们使用下面的cubic-bezier()来实现这次过渡,令t1=0,d1=1。

  cubic-bezier(0,1,0,0)

  这个盒子会几乎立刻从A点移动到中间点,然后用剩下的时间在移动到B点。

  现在我们令t1=1,d1=0,在来看看过渡的效果。

  你会发现在最初的3秒内,盒子几乎不动,之后它几乎直接跳到了中间点,然后再稳步移动到B点。

  你也许已经发现了,d1控制的是A点到中间点之间的距离,t1控制的是从A点到中间点所用的时间。

  现在我们来添加d2和t2.令t1和d1的值都为1,令t2=2,d2=0。盒子会在前三秒内稳步过渡到中间点(因为t1=1,d1=1),然后立刻跳到B点。

  现在我们来移除t2和d2的值。

  盒子会在前三秒内稳步过渡到中间点(因为t1=1,d1=1),然后停止接近3秒的时间,之后立刻跳到B点。

  也就是说,d2和t2分别控制了盒子从中间点到B点的距离和时间。

  5. 使用Cubic-Bezier()添加反弹特效

  在使用反弹特效的时候,最主要的参数就是以距离,也就是d1和d2。当d1的值小于1时,它会让盒子在想B点移动之前时,先退回到A点之前。

  当d2的值大于1时,它会让盒子达到B点之后,再超越B点一段距离,然后再最终回到B点静止。我现在将会在代码中直接添加cubic-bezier()的值,这样你们就可以看到最终效果了。

  #pinStarCenterChkBox:checked —— .pinStarLeaf{ transition:transform 1s cubic-bezier(.8,-.5,.2,1.4); }

到此,关于“CSS3怎么创建带有反弹特效的动画”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. JavaScript如何实现反弹动画效果
  2. SwiftUI 中实现创建反弹动画

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:CSS3模糊层效果怎么实现

下一篇:怎么用纯css3实现图片点击弹出动画遮罩层效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》