css进阶六（过渡、变形）

最新推荐文章于 2022-12-10 18:27:00 发布
最新推荐文章于 2022-12-10 18:27:00 发布
阅读量299 收藏
点赞数
分类专栏： css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44872688/article/details/120872583
版权
本文详细介绍了CSS3中的过渡属性（包括transition-property、duration、timing-function、delay）以及变形技术（transform）的使用方法和示例，对比了过渡与变形的区别。掌握这些技巧，提升网页动画和视觉效果的控制能力。
摘要由CSDN通过智能技术生成

文章目录

一、过渡

1、transition-property属性

transition-property 属性用于指定应用过渡效果的CSS属性的名称。

（1）基本格式

transition-property: none | all | property;
属性值描述
none没有属性会获得过渡效果
all所有属性都将获得过渡效果
property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔

（2）示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1 {
        width: 500px;
        height: 400px;
        border: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 0 auto;/*使盒子上下边框为0，再居中*/
        transition-property: color boder background-color;
        /*当鼠标悬停在盒子上时，过渡变化的属性有字体颜色，背景颜色和盒子边框颜色*/
    }
    .a1:hover {
        color: rgb(1, 2, 1);
        border: rgb(235, 232, 51) dashed 3px;
        background-color: rgb(52, 189, 52);
    }
</style>
<body>
    <div class="a1">西安邮电大学</div>
</body>
</html>

过渡前的盒子：
请添加图片描述
过渡后的盒子：
在这里插入图片描述

2、transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。

（1）基本格式

transition-duration:time;

（2）示例

可以给我们上述代码加上transition-duration属性，就能观察到过渡时间。

  .a1 {
        width: 500px;
        height: 400px;
        brder: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 0 auto;/*使盒子上下边框为0，再居中*/
        transition-property: color boder background-color;
        /*当鼠标悬停在盒子上时，过渡变化的效果有字体颜色，背景颜色和盒子边框颜色*/
        transition-duration: 3s;
    }

3、transition-timing-function属性

transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。

（1）基本格式

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
属性值描述
linear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。
ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。
ease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。
ease-out指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。
ease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。
cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。

（2）示例

可以给我们上述代码加上transition-timing-function属性，就能观察到过渡效果的速度曲线。

  .a1 {
        width: 500px;
        height: 400px;
        brder: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 0 auto;/*使盒子上下边框为0，再居中*/
        transition-property: color boder background-color;
        /*当鼠标悬停在盒子上时，过渡变化的效果有字体颜色，背景颜色和盒子边框颜色*/
        transition-duration: 3s;
        transition-timing-function: ease-in-out;
    }

4、transition-delay属性

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。

（1）基本格式

transition-delay:time;
属性值描述
正数过渡动作会延迟触发。
负数过渡动作会从该时间点开始，之前的动作被截断。

（2）示例

可以给我们上述代码加上transition-delay属性，就能观察到过渡效果何时开始。

    .a1 {
        width: 500px;
        height: 400px;
        border: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 0 auto;/*使盒子上下边框为0，再居中*/
        transition-property: color boder background-color;
        /*当鼠标悬停在盒子上时，过渡变化的效果有字体颜色，背景颜色和盒子边框颜色*/
        transition-timing-function: ease-in-out;
        transition-delay: 5s;
    }

5、transition属性

      transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。

（1）基本格式

transition：property duration timing-function delay;

（2）注意

      无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。

二、变形

1、transform

CSS3的变形（transform）属性可以让元素在一个坐标系统中变形。

基本格式

transform：none | transform-functions;

transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。

2、transform-function函数

CSS3的变形（transform）属性可以让元素在一个坐标系统中变形。

2.1 平移

使用translate（）方法能够重新定义元素的坐标，实现平移的效果。

电脑中的坐标轴：盒子原点是o点，x轴和y轴方向如图所示：
在这里插入图片描述

2.1.1 基本格式
transform:translate（x-value,y-value）;

      x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。

2.1.2 示例

移动前的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1 {
        width: 500px;
        height: 400px;
        border: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 0 auto;/*使盒子上下边框为0，再居中*/
    }
    
</style>
<body>
    <div class="a1">西安邮电大学</div>
</body>
</html>

请添加图片描述

移动后的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1 {
        width: 500px;
        height: 400px;
        border: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 0 auto;/*使盒子上下边框为0，再居中*/
        transform:translate(200px,200px)
    }
    
</style>
<body>
    <div class="a1">西安邮电大学</div>
</body>
</html>

请添加图片描述

2.2 缩放

scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。

2.2.1 基本格式
transform:scale(x-axis,y-axis);

        x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。

2.2.2 示例

缩放前盒子：
请添加图片描述
缩放后盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1 {
        width: 500px;
        height: 400px;
        border: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 0 auto;/*使盒子上下边框为0，再居中*/
        transform: scale(.8,1);/*.8即0.8的意思，表示宽度缩小到原来的百分之八十，1的意思是高度不变*/
    }
</style>
<body>
    <div class="a1">西安邮电大学</div>
</body>
</html>

请添加图片描述
补充：
translateX()： 指定对象X轴（水平方向）的平移
translateY()： 指定对象Y轴（垂直方向）的平移

2.3 倾斜

skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。

skew()方法倾斜示意图：
skewx是代表与X轴倾斜的角度，方向是逆时针；skewY是代表与Y轴倾斜的角度，方向是顺时针。
在这里插入图片描述

2.3.1 基本格式
transform:skew(x-angle,y-angle);

        参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。角度值单位为deg。

2.3.2 示例

倾斜前盒子：
请添加图片描述
倾斜后盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1 {
        width: 500px;
        height: 400px;
        border: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 80px auto;/*使盒子上下边框为0，再居中*/
        transform: skew(30deg,30deg);
    }
</style>
<body>
    <div class="a1">西安邮电大学</div>
</body>
</html>

请添加图片描述

2.4 旋转

        rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。

rotate()方法旋转示意图：
在这里插入图片描述

2.4.1 基本格式
transform:rotate(angle);

        参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。角度值单位为deg。

2.4.2 示例

旋转前盒子：
在这里插入图片描述
旋转后盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a1 {
        width: 500px;
        height: 400px;
        border: #000 solid 1px;
        color: gold;/*设置字的颜色*/
        background-color: burlywood;
        overflow: hidden;/*假设文字超出边框则隐藏*/
        margin: 80px auto;/*使盒子上下边框为0，再居中*/
        transform: rotate(30deg);
    }
</style>
<body>
    <div class="a1">西安邮电大学</div>
</body>
</html>

请添加图片描述

2.4.3 3D旋转

1、基本格式：

transform:rotateX(a);

        参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。

2、基本格式：

transform:rotateY(a);

        参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。

2.5 中心点

        变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。

2.5.1 基本格式
transform-origin: x-axis y-axis z-axis;

        transform-origin属性包含三个参数，其默认值分别为50% 50% 0，各参数的具体含义如下：

参数描述
x-axis定义视图被置于X轴的何处。可能的值有：
left
center
right
length
%
y-axis定义视图被置于Y轴的何处。可能的值有：
top
center
bottom
length
%
z-axis定义视图被置于Z轴的何处。可能的值有：
length
2.5.2 示例
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   .a1 {
       width: 500px;
       height: 400px;
       border: #000 solid 1px;
       color: gold;/*设置字的颜色*/
       background-color: burlywood;
       overflow: hidden;/*假设文字超出边框则隐藏*/
       margin: 80px auto;/*使盒子上下边框为0，再居中*/
       transform: rotate(30deg);
       transform-origin: 40% 50% 0;
   }
</style>
<body>
   <div class="a1">西安邮电大学</div>
</body>
</html>

请添加图片描述

三、变形和过渡的区别

1、变形能够设置对象的中心点;过渡默认是对象的左上角,不能改变；
2、过渡效果是针对元素的属性进行的改变;变形是针对整个元素进行的改变；
3、过渡效果可以设定过渡的时间、曲线、延迟等;变形不能设置,变形是瞬间完成的变化；
4、过渡、变形都不会对其他元素的布局产生影响；
5、两者一般都会设置触发的条件。
二十一块石头
关注
专栏目录
过渡，变形，透视，动画（CSS 颠覆性特征）
qq_45615778的博客
09-19 469
一.过渡(CSS3) 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 在CSS3里使用transition可以实现补间动画（过渡效果） 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。 语法格式： transition:  要过渡的属性 &nbsp...
前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）
最新发布
uu0216的博客
07-11 2341
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
过渡，变形
m0_66605437的博客
06-23 75
一，过渡 什么是过渡 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果 transition属性 duration property delay timing-function transiton子属性 none：没有属性会获得过渡效果 all：默认值，所有属性获得过渡效果 property:定义 应用过渡效果的CSS属性名称列表 tim
过渡、变形、动画
weixin_42661283的博客
01-27 471
过渡（transition）：哪个元素需要过渡就写在哪个元素上 transition:all 0.3s linear 0; /*要过渡的属性 过渡执行的时间 运动速度 何时开始*/ 2D变形（transform） 注意：组合写法：旋转之后，坐标会跟着旋转 移动： transform:translate(-50%,-40%); /*x轴位移-50% y轴位移-40%*...
任务四 过渡与变形
weixin_46446530的博客
03-26 141
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡与变形的综合应用</title> <style type="text/css"> body{ background-color: black; }...
CSS3中过渡和变形的区别和联系
蓝枫秋千的踩坑记录
10-10 289
过渡是针对元素的属性进行改变，而变形是针对整个元素进行改变 过渡是能够设定过渡的时间，曲线，延迟等，而变形不能够设置，是瞬间完成的变化 两者都不会对其他元素的布局产生影响 两者一般都会设置触发条件，比如说hover（不像动画就一开始就开始变化） 变形能够通过transform-origin设置中心点，过度默认就是左上角不能改变 ...
CSS相关综合专栏。 计划包含四个方面： ①CSS基础②进阶专题③面试题汇总④一些有意思的奇技淫巧。.zip
03-16
CSS进阶专题通常涵盖更复杂的技术，如CSS动画和过渡、响应式设计、CSS预处理器（如Sass、Less）以及CSS模块化（如CSS Modules或CSS-in-JS）。此外，CSS3的新特性，如多列布局、阴影、渐变、变形和过滤器，也是这部分...
HTML5与CSS3进阶教程：全面掌握新信息技术
- 第5章：深入探讨CSS3的变形和过渡效果。 - 第6章：响应式设计原则和实现方法。 - 第7章：CSS3中的高级布局技术，如弹性盒子（Flexbox）。 - 第8章：HTML5的多媒体支持和应用。 - 第9章：CSS3动画和交互效果的实现...
HTML5+CSS3实例源码（包含20个）
12-30
实例代码通常会展示如何有效地组合HTML5元素和CSS3属性，例如如何使用CSS3的变形（transform）、过渡（transition）和动画（animation）来创建动态效果，或者如何利用Flexbox或Grid布局创建复杂且灵活的网页结构。...
origamid-css-avancado1
02-10
【标题】"Origamid CSS 高级教程1" 是一个专门针对CSS进阶学习的资源包，旨在帮助用户深入理解和掌握CSS的高级特性与技巧。这个教程可能由知名的在线教育平台Origamid提供，专注于提升用户的前端设计能力。 【描述...
使用css 画出弧形平滑过渡效果
weixin_39246975的博客
07-23 1622
1、效果图 2、HTML： <div class="testA"></div> 3、CSS .testA{ width: 100px; height: 50px; background-color: #F0F2FA; margin-left: 50px; position: relative; border-top-left-radius: 10px; border-t
css3 实现元素 弧线运动
热门推荐
WangYangsea的博客
06-06 2万+
如何使用CSS控制元素弧线运动 我们都知道，CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性，就可以实现元素的动画效果。但是如何通过css实现元素实现弧线运动呢： 如上图动画效果所示，圆球弧线运动，分析运动： 将小球的运动拆分成X轴和Y轴两个运动来看，此时X轴的小球是以 （慢—快） 这样的速度运动； 而Y轴的方向小球是以（快—慢）这样的...
css里的deg,CSS角度单位：deg、grad、rad、turn
weixin_35505988的博客
08-04 2750
1、deg度(Degress)。一个圆共360度90deg = 100grad = 0.25turn ≈ 1.570796326794897rad-moz-transform: rotate(2deg);-webkit-transform: rotate(2deg);transform: rotate(2deg);2、grad梯度(Gradians)。一个圆共400梯度90deg = 100gra...
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
weixin_43899069的博客
06-27 734
文章目录transfrom2D转换案例代码效果图元素变形原点3D转换3D转换——案例案例代码 transfrom transform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D 转换。 transform属性的基本语法如下所示： transform：none | transform-functions; 属性一：默认值为none，适用于内联元素和块元素，表示不进行变形。 属性二：用于设置变形函数，可以是一个或多个变形函数列表。 2D转换 transform-function
css 块元素、行内元素、行内块元素极其相互转换
weixin_50632313的博客
09-14 3286
css 块元素、行内元素、行内块元素极其相互转换（黑马笔记）
CSS知识梳理
weixin_68915174的博客
12-10 1093
（number表示占的份数，默认0）数值越小，排列越靠前，默认0。
css的背景过渡
qq_53244180的博客
11-23 365
css的背景过渡
css3 transtion 从右向左过渡 从下到上过渡
qq_35971976的博客
07-19 3379
提示系统默认是从左到右、从上到下过渡的。
HTML 变形(transform)、转换(transition)和动画(animation)
咖啡味的小认真
08-18 1万+
一、变形 Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transform: rotate | scale | skew | translate |matrix; 我们同时对一个元素进行transform的多种属性操作，例如rotate、scale...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值