4 CSS的变换、过渡与动画

最新推荐文章于 2024-06-14 11:02:27 发布

日立安

最新推荐文章于 2024-06-14 11:02:27 发布

阅读量919

点赞数 24

分类专栏： HTML5\CSS3 文章标签： css 前端

本文链接：https://blog.csdn.net/imdeity/article/details/139249122

版权

HTML5\CSS3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS3引入了变换、过渡和动画特性，使得网页可以呈现出丰富的视觉效果和交互体验。通过这些新特性，开发者可以创建复杂的动画效果，而不需要使用JavaScript。

4.1 变换（Transforms）

变换允许开发者对元素进行旋转、缩放、倾斜和平移操作。这些变换可以单独使用，也可以组合使用。

4.1.1 旋转（Rotate）

rotate 变换用于旋转元素。可以指定旋转的角度，正值表示顺时针旋转，负值表示逆时针旋转。

/* 旋转元素45度 */
.element {
    transform: rotate(45deg);
}

4.1.2 缩放（Scale）

scale 变换用于缩放元素。可以指定水平和垂直方向的缩放比例。

/* 缩放元素为原始大小的两倍 */
.element {
    transform: scale(2);
}

/* 水平缩放两倍，垂直缩放一半 */
.element {
    transform: scale(2, 0.5);
}

4.1.3 平移（Translate）

translate 变换用于平移元素。可以指定水平和垂直方向的位移。

/* 水平平移50px，垂直平移100px */
.element {
    transform: translate(50px, 100px);
}

4.1.4 倾斜（Skew）

skew 变换用于倾斜元素。可以指定水平和垂直方向的倾斜角度。

/* 水平倾斜30度 */
.element {
    transform: skewX(30deg);
}

/* 垂直倾斜30度 */
.element {
    transform: skewY(30deg);
}

/* 同时进行水平和垂直倾斜 */
.element {
    transform: skew(30deg, 20deg);
}

4.1.5 组合变换

可以将多种变换组合在一起使用。

/* 平移元素50px并旋转45度 */
.element {
    transform: translate(50px) rotate(45deg);
}

4.2 过渡（Transitions）

过渡允许元素属性的变化在一段时间内平滑进行，提供了流畅的视觉效果。

4.2.1 定义过渡

transition 属性用于定义元素属性变化时的过渡效果。

/* 定义所有属性的过渡效果，持续时间为0.3秒，使用ease缓动效果 */
.element {
    transition: all 0.3s ease;
}

4.2.2 指定过渡属性

可以指定特定属性的过渡效果。

/* 定义背景颜色和宽度的过渡效果 */
.element {
    transition: background-color 0.3s ease, width 0.3s ease;
}

4.2.3 过渡效果示例

通过过渡效果改变背景颜色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过渡效果示例</title>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 0.5s ease;
}

.box:hover {
    background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

4.3 动画（Animations）

CSS3动画允许开发者通过定义关键帧动画来创建复杂的动画效果。

4.3.1 @keyframes规则

@keyframes 规则用于定义动画。关键帧指定了动画过程中不同时间点的样式。

@keyframes example {
    0% {
        background-color: red;
        left: 0px;
    }
    100% {
        background-color: yellow;
        left: 100px;
    }
}

4.3.2 应用动画

animation 属性用于将动画应用到元素上。

/* 应用动画，持续时间为5秒，循环播放 */
.element {
    animation: example 5s infinite;
}

4.3.3 动画属性

animation-name: 动画名称，与@keyframes定义的名称一致。
animation-duration: 动画持续时间。
animation-timing-function: 动画缓动效果，如ease、linear等。
animation-delay: 动画开始前的延迟时间。
animation-iteration-count: 动画循环次数，可以是数值或infinite。
animation-direction: 动画播放方向，可以是normal、reverse、alternate等。

4.3.4 动画示例

创建一个移动和改变背景颜色的动画。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动画示例</title>
<style>
@keyframes moveAndChange {
    0% {
        background-color: red;
        transform: translateX(0);
    }
    50% {
        background-color: yellow;
        transform: translateX(100px);
    }
    100% {
        background-color: green;
        transform: translateX(200px);
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: moveAndChange 4s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>