web前端进阶之一些动画

news2024/9/9 4:31:55

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转换

语法：

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

取值（正负均可）

像素单位数值
百分比

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

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

绕x轴进行空间旋转：

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

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变化过程中的变化速度。

默认为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; //动画名称 动画时间

动画属性

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延长时间

 /* 速度曲线：加速 减速 匀速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;

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

7.css3之transform-origin属性

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

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

可以设置九个位置的值：水平方向：leftcenterright0 50% 100% 垂直方向：topcenter 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;
}