前端css中transition的使用

news2025/1/11 6:56:05

前端css中transition的使用

一、前言
二、transition的4个属性
三、例子
- 1.源码1
- 2.源码1运行效果
四、结语
五、定位日期

一、前言

CSS中的transition（过渡），根据字面意思就可以理解成一种变化状态的过程。当我们有一个方形，我们想让它变化成一个圆，持续2秒钟的变换；又或者粉色方形变换成蓝色圆形，持续3秒钟的变换，那么前面这些需求我们可以使用transition来实现。
后边的代码运行后演示，可看出过渡动画是双向的。当我们鼠标悬停在组件上时，组件进行过渡动画，当鼠标离开组件时，也会触发进行过渡动画返回变化为初始状态。

二、transition的4个属性

举例：
transition: A B C D;
A ------ 过渡动画的对象或组件的某个属性，可以是某个按钮的颜色（背景颜色，边框颜色等），按钮圆角，等。

B ------ 持续这个过渡动画的时间，比如圆形变为方形这个过程持续2s。以秒（s）或毫秒（ms）为单位。

C ------ 过渡动画中的速度曲线，常用的值包括：

linear（直线的）动画从头到尾的速度相同
ease（舒适）动画慢速开始，然后快，结束前慢。默认的计时函数。
ease-in 开始慢，逐渐加快到完成。
ease-out 一开始全速快，然后逐渐减速到完成。
ease-in-out 动画开始结束慢，中间速度最快。
cubic-bezier(n,n,n,n) 自定义一个贝塞尔曲线。
steps(n, start | end) 指定一个固定步数的跳转效果，不是平滑过渡。

D ------ 延迟开始过渡的时间，说白了就是先停一下，过多久之后再开始，以秒（s）或毫秒（ms）为单位。

注意：
如果只需要一个组件的一个属性如按钮的背景颜色进行过渡动画，那么设置好下面的A,B,C,D就行，如下：

transition: background-color 2s linear, /* 背景颜色在2秒内以线性方式变化。 */

那如果我除了要对背景颜色，还对圆角进行过渡变换，那么需要用逗号,隔开，如下：

transition: background-color 2s linear, border-radius 3s ease 1s;

三、例子

1.源码1

<!DOCTYPE html>
<!-- DOCTYPE声明定义了文档的类型和HTML的版本。这里指定为HTML5。 -->
<html lang="en">
<!-- <html>标签是HTML文档的根元素。lang属性指定页面的语言，这里的'en'表示英语。 -->

<head>
    <style>
        /* 在<head>部分的<style>标签内定义内部CSS样式。 */

        .box {
            width: 100px; /* 设置按钮的宽度为100像素。 */
            height: 100px; /* 设置按钮的高度为100像素。 */
            background-color: blue; /* 设置按钮的初始背景颜色为蓝色。 */
            border-color: pink; /* 设置按钮的边框颜色为粉红色。 */
            border-width: 5px; /* 设置边框宽度为5像素，使边框明显可见。 */
            /* 定义background-color和border-radius属性的过渡效果。 */
            transition: background-color 2s linear, /* 背景颜色在2秒内以线性方式变化。 */
                        border-radius 3s ease 1s; /* 边框半径在3秒内以缓和方式变化，从1秒后开始变化。 */
        }

        .box:hover {
            background-color: red; /* 当鼠标悬停时，背景颜色变为红色。 */
            border-radius: 50%; /* 当鼠标悬停时，边框半径变为50%，创建圆形效果。 */
            border-color: aqua; /* 当鼠标悬停时，边框颜色变为水蓝色。 */
        }
    </style>
</head>
<body>
    <!-- <body>标签包含HTML文档中将在网页上可见的内容。 -->
    <button class="box"></button> <!-- 一个具有'class="box"'的按钮元素，应用了<head

2.源码1运行效果

鼠标悬停按钮，方形蓝底粉边框，过渡动画变为圆形红底天蓝边框

鼠标未悬停于按钮上时，为蓝底粉边框，如下图：
在这里插入图片描述
鼠标悬停于按钮上时，过渡变化为红底，淡蓝色边框，如下图：

四、结语

在前面关于css的border-radius属性中，用到了本文的transition，则为此专门花了点时间学习了transition。为此还自己尝试写出了个奇怪好玩的按钮。本文transition中关于过渡速度曲线中的* cubic-bezier(n,n,n,n) 和 steps(n, start | end)只是简单的讲解，具体用法后续会根据需要编写相关的博文。