利用CSS3制作动画(变形、过渡、动画)

最新推荐文章于 2022-07-09 15:20:49 发布

VIP文章眰恦ღ

最新推荐文章于 2022-07-09 15:20:49 发布

阅读量1.4k

点赞数

分类专栏： # 前端小套装大前端文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45277249/article/details/112392347

版权

CSS3变形

变形介绍

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。

CSS3变形是通过tranform实现的，可以用在块元素和行内元素上，该属性可以旋转、缩放、移动元素。

transform:[transform-function] *; 设置变形函数，可以是一个，也可以是多个，中间以空格分开。

变形函数
translate()	平移函数，基于X、Y坐标重新定位元素的位置
scale()	缩放函数，可以使任意元素对象尺寸发生变化
rotate()	旋转函数，取值是一个度数值
skew()	倾斜函数，取值是一个度数值

CSS3 的3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数。

CSS3变形包括2D变形和3D变形，3D变形使用和2D变形类似，这里我们只详聊2D变形。

浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
2D transform	9+	3.5+	4.0+	10.5+	3.1+

CSS3的2D变形虽然得到了众多浏览器支持，但实际使用的时候需要添加浏览器各自的私有属性(前缀)

IE 9中使用2D变形时，需要添加-ms-前缀，在IE10以后开始支持标准版本。
Firefor3.5至Firefox15.0版本需要添加前缀-moz-，在Firefox16以后开始支持标准版本。
Chrome4.0开始支持2D变形，在实际使用中需要添加前缀-webkit-
Opera10.5开始需要添加前缀-o-
Safari 3.1开始支持2D变形，在实际使用中需要添加前缀-webkit-

不需要死记硬背,由于浏览器不断更新，具体哪个浏览器版本支持什么样的CSS属性。推荐一个在线网站https://www.caniuse.com/

2D变形

在二维空间和三维空间，元素可以被扭曲、移动、旋转。只不过2D变形是在X轴和Y轴上变换，也就是水平轴和垂直轴。

3D变形除了X轴和Y轴外，还有一个Z轴。

1.2D位移

位移指的是将元素从一个位置移动到另一个指的的位置上，可以使用translate()函数元素在X轴、Y轴上任意移动而不影响在X轴或Y轴上的其他元素。

语法：translate(tx,ty)；

tx：表示X轴（横坐标）移动的向量长度，正值表示元素向X轴右边移动，负值向X轴左边移动。

ty：表示Y轴（纵坐标）移动的向量长度，正值表示元素向Y轴下边移动，负值向Y轴上面移动。

tx或ty的单位是px，也可以是百分比。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>translate的使用</title>
    <style>
        li{
   
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242, 123, 5, 0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li a{
   
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{
   
            background: rgba(242, 88, 6, 0.87);
            border-radius: 6px;
            /*设置a元素在鼠标移入时向右下角移动4px，8px*/
            transform: translate(4px,8px);
            -webkit-transform: translate(4px,8px);
            -o-transform: translate(4px,8px);
            -moz-transform: translate(4px,8px);
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">服装城</a></li>
    <li><a href="#">美妆馆</a></li>
    <li><a href="#">超市</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">闪购</a></li>
    <li><a href="#">团购</a></li>
    <li><a href="#">拍卖</a></li>
    <li><a href="#">金融</a></li>
</ul>
</body>
</html>

鼠标悬停上面产生的效果

当translate()函数只有一个值的时候，则表示水平偏移；如果只设置垂直偏移，就必须设置第一个参数为0，第二个值是偏移量。如果只想设置一个方向上的位移还可以：

translateX（tx）

表示只设置X轴的位移，transform：translate(100px,0），实际上等于transform：translateX（100px）。
translateY（ty）

表示只设置Y轴的位移，transform：translate(0,100px），实际上等于transform：translateY（100px）。

2.2D缩放

scale()函数能够用来缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例，默认值为1,0~0.99的任意值都可以使元素缩小，而任何大于1的值都能让元素放大。
scale()可以接收一个值，也可以接受两个值，只有一个值时，第二个值默认和第一个值相等。

语法：

scale(sx,sy)	
或
scale(sx)

sx：指定横向坐标（宽度）方向的缩放量。

sy：指定纵向坐标（高度）方向的缩放量。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>scale的使用</title>
    <style>
        li{
    
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242, 123, 5, 0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li a{
    
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{

最低0.47元/天解锁文章

眰恦ღ

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
利用CSS3制作动画(变形、过渡、动画)

CSS3变形变形介绍CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。CSS3变形是通过tranform实现的，可以用在块元素和行内元素上，该属性可以旋转、缩放、移动元素。transform:[transform-function] *; 设置变形函数，可以是一个，也可以是多个，中间以空格分开。变形函数translate()平移函数，基于X、Y坐标重新定位元素的位置
复制链接

扫一扫