css学习12：过渡、变化、动画

2024-01-07 18:31:22

元素的动效

二十二、过渡

transition 在英文中是过渡的意思，过渡可以为一个元素在不同状态之间切换不同的过渡效果。它由四个部分构成，分别是：过渡属性的名称，过渡需要的时间，过渡的方式和过渡的延迟时间。

1.过渡属性的名称

- `transition-property` 过渡样式

过渡一定是有变化都，在 css 中变化都是样式，比如我们需要过渡一个颜色，那么你要过渡的属性名称就是`background-color`

- 当过渡多个样式的时候可以写 all

2.过渡需要的时间

- `transition-duration`如果让过渡的感觉柔和一下，那就是需要过渡的时间不是一瞬间的而是慢慢的。

- 过渡的时间直接是以秒 s 或者 ms 为单位，默认 0s

3.过渡的方式

- `transition-timing-function`过渡方式,过渡方式的不同而在运动中改变速度

- 贝塞尔曲线函数是非常复杂`http://www.css3beziercurve.net/` 函数是非常复杂的，但是在

- css 中为我们封装了 5 种

- 默认值，先慢再快最后慢`transition-timing-function:ease;`

- 先慢，后越来越快`transition-timing-function:ease-in;`

- 速度在开始和结束时都很慢,中间不加速`transition-timing-function:ease-in-out;`

- 先快，后越来越慢`transition-timing-function:ease-out;`

- 匀速`transition-timing-function:linear;`

div {
	transition-property: all;
	transition-duration: 1s;
	/*默认值，先慢再快最后慢*/
	transition-timing-function: ease;
	/*先慢，后越来越快*/
	transition-timing-function: ease-in;
	/*速度在开始和结束时都很慢,中间不加速*/
	transition-timing-function: ease-in-out;
	/*先快，后越来越慢*/
	transition-timing-function: ease-out;
	/*匀速*/
	transition-timing-function: linear;
}

4.过渡的延迟时间

- 过渡的延迟时间 `transition-delay`在过渡效果开始作用之前需要等待的时间，值以秒（s）或毫秒（ms）为单位。

- 取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

5.简化写法

- 顺序是 transition：过渡时间延迟时间过渡方式过渡样式

- 注意“执行时间和延迟时间的顺序”不能改变

- 最简写法：transition：过渡时间；

CSS3 过渡动画模板、CSS3 Transition 动画模板 http://web.chacuo.net/css3transition

6.多重样式过渡

使用 transition 进行多个样式并且不同时过渡样式时，每一个不同时间的过渡样式需要用逗号分隔。

div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	left: 0;
	/* 注意第二个的延迟时间 */
	transition: 1s linear background-color, 1s 1s left;
}
body:hover div {
	left: 400px;
	background-color: blue;
}

二十六、变化

CSS 里变化这个属性属于 css 的一个精彩的革新，transform 属性允许多种变化效果的函数对元素进行改变。

变换分为两种：2D（重点）和 3D，需要知道三个轴 xyz。

1.transform 变化属性

四个最常用的变化函数，分别是：

- translate 位移

- scale 缩放

- rotate 旋转

- skew 扭曲

2.translate()位移函数

translate()在变换中位移可以有 X 轴、 Y 轴、Z轴的位移方向，参数可以使用长度单位，百分比对应的是自己的宽度和高度，正直或者负值均可。Z轴的位移只有在父元素具有透视的效果下才可以看到。

- `transform: translateX(x); ` 沿 X 轴方向平移正值右移负值左移

- `transform: translateY(y);` 沿 Y 轴方向平移正值下移负值上移

- `transform: translate(x, y);` 沿 X 轴和 Y 轴同时平移

- 注意：位移和固定定为不同，它并没有脱离文档流，也不会影响其他元素的布局

元素居中，之前 margin 负值是需要知道元素的宽度和高度，使用 translate 百分比值则不需要

.box div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

3.rotate()旋转函数

- rotate()函数在 2d 变换中旋转只能以 Z 轴进行旋转，所以 rotate()函数默认为 Z 轴旋转函数。

- 参数为旋转角度，deg 单位为旋转角度。角度可以为正值或负值。

- 旋转中心点，是元素最中心的点

4.scale()缩放函数

- scale()缩放函数中的参数是以倍数为基础的，1 代表当前大小

- 1 以上的“正数”为当前大小的倍数。

- 1 以下 0 以上的“正数”为缩小的倍数。

- 0 倍为消失

- 当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用

5.skew()倾斜扭曲函数

- skew()在 2d 变换中倾斜可以有 X 轴和 Y 轴的倾斜角度

- 填写旋转角度，deg 单位为旋转角度，角度可以为正值或负值。

- skew()默认为 X 轴倾斜函数

7.变换函数的执行顺序

当变换属性需要叠加使用时，不可以生明多个 transform 属性，而是需要把所有要使用的变换函数添加在一个 transform 属性中，用空格分隔。但存在前后顺序问题。

用控制台改变旋转角度看效果 div:nth-child(1):hover {

transform: translateX(200px) rotate(60deg);

}

用控制台改变旋转角度看效果 div:nth-child(2):hover {

transform: rotate(60deg) translateX(200px);

}

8.基点

transform-origin 属性是可以改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

- 在变化中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

- transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”。

- 当取值为长度值时，单位可以为 px、em 和百分比等。

9.透视效果

(1)透视

在 css 变换中如果想作出 3d 效果，一定要关注透视距离 perspective 属性。

perspective 属性值越大，元素的变形就越小。

perspective 属性值越小，元素的变形就越大。

- perspective 属性定义透视距离，距离为长度单位

- 模拟人眼睛到 3D 变化元素之间的距离

- 【重点】透视距离只能定义在 3D 变化的父元素上

(2) transform-style

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

- 让盒子位于三维空间里transform-style: preserve-3d;

- 让子盒子位于此元素所在的平面内(默认)transform-style: flat;

(3)旋转函数 x 轴和 y 轴

2d 中旋转是 z 轴旋转，而想要感受 3d 效果，需要旋转的 x 轴和 y 轴。

- `transform:rotateX(deg);`x 轴旋转

- `transform:rotateY(deg);`y 轴旋转

(4)位移函数 z 轴

3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。

transform: translateZ(正值) 沿z轴向前（接近模拟视觉的距离）
transform: translateZ(负值) 沿z轴向前（远离模拟视觉的距离）

【练习】

让扑克牌旋转起来具有正反两个面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin: auto;
     perspective: 300px;
    }
    .box:hover .pk {
      transform: rotateY(360deg);
    }
    .pk {
      border: 1px solid blue;
      width: 205px;
      height: 289px;
      margin: auto; 
      position: relative;
      transition: 3s;
      transform-style: preserve-3d;
    }
    .pk>div {
      width: 205px;
      height: 289px;
      position: absolute;
    }
    .a {
      background-image: url(./扑克a.jpg);
    }
    .b {
      background-image: url(./扑克b.jpg);
      transform: translateZ(-1px) scaleY(-1);
    }
  </style>
</head>
<body>
  <!-- 205*289 -->
  <div class="box">
    <div class="pk">
      <div class="a"></div>
      <div class="b"></div>
    </div>
  </div>
</body>
</html>

二十四、动画

动画就是指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。h5 中动画的运用效率要高于使用 js 来体现动画效果，因为动画是渲染式的。

1.关键帧

`@keyframes` 是 css 中的@规则，通过在动画序列中定义关键帧的样式，来控制 CSS 动画序列中的步骤。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

@keyframes move {

0% {transform: translate(0);}

100% {transform: translate(600px);}

}

2.动画名称

`animation-name`属性就是指定动画要使用哪一个关键帧。

div {
	width: 100px;
	height: 100px;
	background-color: red;
	/*这个元素使用关键帧*/
	animation-name: move;
}
@keyframes move {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(600px);
	}
}

3.动画持续时间

`animation-duration`属性代表一个动画周期的时长，单位为秒(s)或者毫秒(ms)，默认值 0 秒。

div {
	/*这个元素使用关键帧*/
	animation-name: move;
	/* 动画时长 */
	animation-duration: 1s;
}
@keyframes move {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(600px);
	}
}

4.动画的运动方式

`animation-timing-function`属性跟`transition-timing-function`属性就是过渡的运动方式类似。同样也具有封装好的方式和贝塞尔曲线的方式。

- ease;默认

- ease-in;

- ease-out;

- ease-in-out;

- linear;

- steps(数值, 定位) 定位：start/end 默认 end 指逐步运动

【练习】

> 使用 steps()函数完成，逐帧完成动画效果

> loding 图标分为四段和八段完成帧动画

div {
	width: 30px;
	height: 30px;
	margin: 20px auto;
	animation-name: zhuan;
	animation-duration: 1s;
}
@keyframes zhuan {
	0% { transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
.a1 {
	animation-timing-function: linear;
} /*平滑的旋转*/
.b1 {
	animation-timing-function: linear;
} /*平滑的旋转*/
.a2 {
	animation-timing-function: steps(4);
} /*断续旋转分4段*/
.b2 {
	animation-timing-function: steps(8);
} /*断续旋转分8段*/

5.动画的延迟时间

`animation-delay`属性动画的延迟时间和之前过渡的延迟时间一样使用

div {
	/*这个元素使用关键帧*/
	animation-name: move;
	/* 动画时长 */
	animation-duration: 1s;
	/* 运动方式 */
	animation-timing-function: linear;
	/* 动画延迟时间 */
	animation-delay: 2s;
}

6.结束状态

在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置

- `animation-fill-mode`:设置动画结束时盒子的状态

- 属性值：`forwards`保持动画结束后的状态

- 属性值：`backwards`动画结束后回到最初的状态

7.动画化执行顺序

animation-direction 属性是动画的执行顺序

- 属性值：normal 正向，默认值

- 属性值：reverse 反向

8.动画循环次数

- `animation-iteration-count`属性主要用来定义动画的播放次数。

- 其值通常为整数，但也可以使用带有小数的数字，其默认值为 1，这意味着动画将从开始到结束只播放一次。

- 如果取值为`infinite`，动画将会无限次的播放。

9.简写方式

- animation: 动画执行时间延迟时间执行关键帧名称运动方式运动次数结束状态;

- 最简方式 animation: 动画执行时间执行关键帧名称;

- 执行时间和延迟时间顺序不可调整

- `animation: 2s 3s move linear 1 forwards reverse;`

10.动画停止

- animation-play-state 属性规定动画是否正在运行或暂停。

- 属性值：running 运动的，默认值

- 属性值：paused 暂停的

.box:hover .hsl {

animation-play-state: running;

animation-play-state: paused;

background-color: blue;

}

【练习】

> 商城滚动态

> 使用商城的图片，文字尽量写两行以内，保持一致行数

> 鼠标移入滚动区域是停止滚动，移开恢复滚动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        @keyframes move{
            0%{transform: translateX(0);}
            100%{transform: translateX(-1000px);}
        }
        *{
            margin: 0;
            padding: 0;
        }
        ul{list-style: none;}
        .wai{
            width: 1000px;
            margin: auto;
            background-color: rgb(37, 202, 243);
            overflow: hidden;
        }
        .nei{
            width: 200%;
            display: flex;
            flex-wrap: wrap;
            animation:move 10s infinite linear;
        }
        .nei:hover{
            /* 鼠标移入让动画暂停 */
            animation-play-state: paused;
        }
        .nei li{
            width: 12.5%;
            text-align: center;
        }
        .nei li img{
            width: 60%;
        }
    </style>
</head>
<body>
    <div class="wai">
        <ul class="nei">
            <li>
                <img src="./img/recommend/recommend_img1.png" alt="">
                <p>联想xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img2.png" alt="">
                <p>联想xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img3.png" alt="">
                <p>联想xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img4.png" alt="">
                <p>联想xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img1.png" alt="">
                <p>联想xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img2.png" alt="">
                <p>联想xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img3.png" alt="">
                <p>联想xzp9886</p>
            </li>
            <li>
                <img src="./img/recommend/recommend_img4.png" alt="">
                <p>联想xzp9886</p>
            </li>
        </ul>
    </div>
</body>
</html>

11.开源 CSS 动画库

- animate.css 下载下载:http://www.animate.net.cn/

- 元素加入需要的类名

- 当前元素使用 animate 属性，属性值为类名和运行时间

- 需要在元素先加上 `animate__animated` 类，之后在加入其他类

<head>
	<link rel="stylesheet" href="./animate.min.css" />
	<style>
		div {
			width: 200px;
			height: 100px;
			background-color: red;
			animation: 1s animate__rubberBand;
		}
	</style>
</head>
<body>
	<div class="animate__rubberBand">元素</div>
	<div class="animate__animated animate__shakeX" id="div2">自动调用</div>
</body>

码农公寓

元素的动效

相关文章