web前端进阶之一些动画
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变化过程中的变化速度。
其实是通过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; //动画名称 动画时间
动画属性
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延长时间
/* 速度曲线:加速 减速 匀速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使用 默认情况下,元素的动作参考点为元素盒子的中心
可以设置九个位置的值:水平方向: 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