css3 实现动画，变换基点及3D效果~

Posted 2021-04-09 Java联盟

温馨提示：文章底部，有福利链接哦！

各位小伙伴

上次分享的爱心感觉如何呀~

动画效果

首先，娜娜在这边给大家认个错，上次分享落下了一个东西，就是动画效果，没有动画是实现不了爱心一条一条的动作的。

虽然那个爱心源代码已经给大家了，只要复制就有效果，但是娜娜还是希望大家可以明白，每段代码起到的作用，可以按照自己想法来修改代码~

那让我们一起来看看动画效果吧！

首先来做一下准备工作

我们现在要做的就是，让这个小方块按照箭头的方向走一圈。

那么现在开始吧！首先要定义一下动画的名称，注意的是动画的名称不是固定的你喜欢什么名称，就用什么名称就好。名称起好了，我们下面设置样式。

第一种动画方式

0~25%表示方块从左上移动到右上方，

25%~50%表示方块从右上移动到右下方，

50%~75%表示方块从右下方移动到左下方，

75%~0表示方块回到初始位置。

在 0~100% 之间设置动作时，起始状态可以不写，结束动作也可以不写默认回到起始点（图片上0%的部分），中间数值也是可以自由分配的不一定非得像我这样 25%、50%、75%这样分配。

现在调用这个动画，设置调用动画的名称，以及全过程所需要的时间。

运动效果：

除了上述的两中属性，还有其他属性可以设置，

animation-delay: 设置动画延迟，设置经过多少时间才开始运动，

animation-timing-function: 设置动画运动速度的曲线，下面有一些选项

    linear: 匀速

    ease：默认。动画以低速开始，然后加快，在结束前变慢。

    ease-in：动画以低速开始。

    ease-out：动画以低速结束。

animation-iteration-count: 播放次数，可以给次数，没有单位，infinite 无限循环，默认执行一次

animation-direction: 是否反向播放动画，alternate反向播放动画默认是normal 不会反向播放。

给大家演示一下反向播放：

除了上面的这些属性，还有一条属性 animation-play-state 控制动画的状态

    paused  暂停

    running  播放

这两条语句的意思就是：

第一个p标签中的方块，鼠标放上去，就不会运动了

第二个p标签，鼠标放上去，小方块才会运动

这个就不给大家演示了哈~。

第二种方式：

这种方式，就没有第一种那么多变，很简单就是：

from~to 从哪来~到哪去~

下面试动画属性的复合写法：顺序

animation: name  duration delay  timing-function iteration-count  direction;

看一下效果：

变换基点

先来做一下准备工作：

上面都是些基础的属性，就不解释了哈~现在我们来给它一个动画效果：

这个我们上次有说，就是旋转45deg的意思。

我们可以看见方块一的旋转动作是绕着它的中心点来进行旋转动作的。接下来我们介绍的就是改变它的旋转基点~

transform-origin 变换基点: 

即变换参考点，默认是绝对中心点，也就是center center ，相当于把钉子定在哪一个点这一个点就需要坐标去固定。所以，就有两个值。

第一个值x轴，第二个值y轴，并且两个值之间以空格隔开。

当只有一个值的时候如果是方向值（如 top），另外一个值默认为 center，如果是固定的值（如 30px）,那么这一个值就是 x 轴的值，另外一个是 y 轴默认为 50%；可以为负值（相当于超出盒子以外去了）。

下面给大家演示各种基点的情况：

3D效果

实现 3D 效果需要一个3D的环境。

景深：

使具有三维变换的元素产生透视效果，值越大看起来距离自己就越近，元素就越大。值越小，越远，元素越小。

通常我们使用800px或者1200px ,因为这两个做3D效果是最好的。

怎么样是不是有那么点立体的感觉~

今天就先到这了

明天给大家做一个好玩的东西

期待一下吧~

拜拜~

有任何问题都可以在文章留言，娜姐都看着的呢!

合作,投稿,转载，版权问题请联系 李娜：Lina_Java