likes
comments
collection
share

web前端进阶之一些动画

作者站长头像
站长
· 阅读数 111

1.字体图标的基本使用

首先下载iconfont文件夹，用link标签引入，使用如下：

<i class="iconfont icon-favorites-fill green"></i>
//改样式的话使用iconfont或者使用 .green(自己设置的类名)
.iconfont {
        font-size: 60px;
 }

2.在一个元素悬停，改变另一个元素的样式

.father:hover .son {
        /* translate(水平,垂直) */
        /* transform: translate(100px, 50px); */
        /* 百分比：子盒子自身尺寸的百分比---200px,50px */
        /* transform: translate(100%, 50%); */
        /* transform: translateY(100px); */
}

3.css3动画之 transform-变换

（1）transform空间转换--旋转效果实现[包括边走边转]

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

 /* 顺时针 */
transform: rotate(360deg);
transform: rotateZ(360deg);
/*这两个效果一样，都是围绕中心点，因为中心点也是Z轴的中心点*/

/*逆时针*/
transform: rotate(-360deg);

/* 边走边转 */
transform: translate(600px) rotate(360deg);

        /* 不行----旋转可以改变坐标轴向 */
        /* transform: rotate(360deg) translate(600px); */

        /* 层叠性---不行，效果会覆盖 */
        /* transform: translate(600px);
        transform: rotate(360deg); */

（2）目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

  • 空间：是从坐标轴角度定义的。x y z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
  • 空间转换也叫3D转换

web前端进阶之一些动画

语法：

  • transform：translate3d(x,y,z)
  • transform：translateX(值)
  • transform：translateY(值)
  • transform：translateZ(值)

取值（正负均可）

  • 像素单位数值
  • 百分比

默认情况下，无法观察到z轴位移效果，要使用perspective属性实现透视效果，近大远小，近清楚远模糊。

把这个属性添加给父级：perspective: 1000px; 数值一般在800-1200

web前端进阶之一些动画

绕x轴进行空间旋转：

.box {
         /* 透视效果：近大远小，近实远虚 */
         perspective: 1000px;
}
.box img:hover {
         transform: rotateX(60deg);
         transform: rotateX(-60deg);
}

web前端进阶之一些动画

web前端进阶之一些动画

4.空间转换--立体呈现

使用transform-style: preserve-3d;呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？ 答：不能，因为perspective只能增加近大远小，近实远虚的视觉效果。

实现方法：

  • 添加transform-style: preserve-3d;加在父级身上
  • 使子元素处于真正的3d空间
  • 默认值为flat，表示子元素处于2D平面内呈现

5.css3动画之 transition：过渡

transition的作用是：平滑的改变CSS的值。

  • transition是一次性的，不能重复发生，除非一再触发。
  • transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态，只能完成两个值之间的变化

tansition是一个简写属性，分别包含以下几个属性：

transition-property

指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡。

有以下几个属性值：

  • none：没有过渡动画
  • all：默认值。 所有可被动画的属性都表现出过度动画。
  • 属性名称，如width，background

transition-duration

以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。

可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

transition-timing-function

用来描述整个transition变化过程中的变化速度。

其实是通过timing-function来描述这条加速曲线的。 有ease | linear | ease-in | ease-out | ease-in-out | linear | cubic-bezier等值。

默认为ease。

transition-delay

延迟开始过渡的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

一般都是将以上所有属性合并在transition属性中写。

.trans {
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

一条属性中可以分别指定多个属性，以逗号分隔。

img{
    transition: 1s height, 1s width;
}

这样height和width的变化是同时进行的。 若想让height先变化width后变化，只需给width加一个delay time：

img{
    transition: 1s height, 1s 1s width;
}

注意：在transition属性中，各个值的书写顺序很重要，尤其是transition-duration和transition-delay：第一个值是transition-duration的时间值，第二个值是transition-delay的时间值。

6.css3动画之 animation-动画

过渡实现的效果是：实现2个状态间的变化过程。 使用animation添加动画效果：实现多个状态之间的变化过程，动画过程可控(重复播放、最终画面、是否暂停)。

实现步骤: 1.定义动画

/*定义动画：从200变大到600 */
 @keyframes change {
       from {
              width: 200px;
       }
       to {
              width: 600px;
       }
} 
/* 定义动画：200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
    0% {
        width: 200px;
    }
    50% {
        width: 500px;
        height: 300px;
    }
    100% {
        width: 800px;
        height: 500px;
    }
}

2.使用动画

 /* 使用动画 */
animation: change 1s;   //动画名称 动画时间
动画属性

web前端进阶之一些动画

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延长时间
        /* 速度曲线：加速 减速 匀速linear */
        /* animation: change 1s linear; */

        /* 分步动画,分成三步，一节一节的完成 */
        /* animation: change 1s steps(3); */

        /*  延迟1s，重复3次播放 */
        /* animation: change 1s steps(3) 1s 3; */

        /* 无限循环  alternate：200-600-200 有返回的动画*/
        /* animation: change 1s infinite alternate; */

        /* 默认值, 动画停留在最初的状态 */
        /* animation: change 1s backwards; */

        /* 动画停留在结束状态 */
        animation: change 1s forwards;

web前端进阶之一些动画

目标：使用setps实现逐帧动画 在使用精灵图的时候使用的是逐帧动画，其余都是用补间动画(流畅的变化)。

web前端进阶之一些动画

7.css3之transform-origin属性

transform-origin用于设置动画的基点(中心点) ， 适用于所有块级元素及某些内联元素。

必须配合transform使用  默认情况下，元素的动作参考点为元素盒子的中心

可以设置九个位置的值：水平方向：  left    center      right
                              0       50%       100%
                   垂直方向：  top    center     bottom

默认值：50% 50% ，相对于center center

两种写法，eg：
       transform-origin: left; 
       transform-origin:0;

8.使用scale改变元素的尺寸

/* 要实现的效果：从中心点出发，向四周扩 */
/* transform: scale(x轴缩放倍数,y轴缩放倍数); 
但一般不这么写，因为要等比例缩放，如下*/
transform: scale(1.2);

9.渐变背景

使用background-image属性实现渐变背景效果

  • 渐变是多个颜色逐渐变化的视觉效果
  • 一般用于设置盒子的背景
常用半透明渐变：透明 - rgba()
background-image: linear-gradient(
                transparent,  //透明
                rgba(0,0,0, .6)   //半透明
                ...
);

如何实现鼠标移到图片上出现渐变效果呢？

第一步：准备一个盒子，定位压在图片上面 第二步：hover效果：显示渐变背景 第三步：将盒子效果设置透明度为0 第四步：hover结果设置透明度为1（这是结果）

<div class="box">
      <img src="./images/product.jpeg" alt="" />
      <div class="title">海量存储斩获2021 Interop金奖</div>
      <!-- 渐变背景 mask -->
      <div class="mask"></div>
</div>
//样式
.box {
        position: relative;
}
.box .mask {
        position: absolute;
        left: 0;
        top: 0;
        //隐藏渐变盒子
        opacity: 0;
        //和盒子大小一样
        width: 300px;
        height: 212px;
        //设置渐变
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
        transition: all 0.5s;
}
.box:hover .mask2 {
        //hover结果：透明度为1，显示渐变背景
        opacity: 1;
}
转载自:https://juejin.cn/post/7145009701515460638
评论
请登录