BigCoke

CSS笔记:过渡、放大和旋转
过渡什么是过渡?过渡通常用于 元素正常显示 与: hover及:active等 之间转换时,或是说元素从一个样式转...
扫描右侧二维码阅读全文
10
2019/02

CSS笔记:过渡、放大和旋转

过渡

什么是过渡?过渡通常用于 元素正常显示 与: hover及:active等 之间转换时,或是说元素从一个样式转换到另一种样式所进行的过渡动画。属性名是 transition

浏览器兼容性

从图中可以看出,transition属性兼容Internet Explorer 10、Firefox、Chrome 以及 Opera。
不过Safari浏览若需要正常显示transition,需要加上-webkit-,即-webkit-transition

注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。

以上资料来自W3school

实例

这里我们为一个<a>标签加上过渡属性,当我们把鼠标移动到这个<a>标签上时,会有过渡效果。

示例a标签

CSS部分

.example-1{
    background:white;
    border:3px solid black;
    padding:1em;
    color:black!important;
    transition:all 1s;
}
.example-1:hover{
    background:black;
    color:white!important;
    transform: scale(1.1);
}

参数

通常transition有两个参数。

属性参数1参数2
transition将被过度的属性 (例如:width[宽度] , color[颜色] , all[过渡全部])过渡时间 (一般用秒——s做单位)

为了方便,参数1我一般直接填写all,参数2就要按情况而定了。
我一般写css的时候,会直接加上这一句:

*{
    transition: all 0.5s;
}

这样就可以给所有元素的所有属性加上一个0.5秒的过渡

所有过渡属性

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

不过还是直接用transition这个快捷方式会比较方便。

放大

这个属性很好理解,不过通过这个属性放大并不会影响元素附近的其他元素。

实例

将鼠标移动到这张图片上,它会放大1.2倍。

这样放大是不是有点突然?,你可以给他加上之前讲过的过渡效果。

CSS部分

.example-3{
    transition: all 0.5s;
}
.example-3:hover{
    transform: scale(1.2);
}

旋转

值得一提的是,旋转和放大是同一个属性——transform

实例

将鼠标移动到这个图片上,会旋转90度。

同样你也可以加上过渡属性,这里就不做演示了。

CSS 部分

.example-4:hover{
    rotateZ(90deg)
}

浏览器兼容性

放大和旋转是同一个属性,所以兼容性也一样

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。

以上资料来自W3school

所有参数

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

本文由 BigCoke 所撰,未注明内容均为原创,
并采用 CC BY 4.0 进行授权许可,转载请注明源地址
原文地址:https://cokewithice.com/p/117.html

Last modification:February 18th, 2019 at 06:06 pm

Leave a Comment

6 comments

  1. Broca-Phenol

    :roll: 你说会rotate90°的图怎么不动呀,是我浏览器出问题了吗

    1. BigCoke
      @Broca-Phenol

      我刚刚加上了评论可以使用del标签

    2. BigCoke
      @Broca-Phenol

      细节,都是细节,我这边貌似也没动

      1. Broca-Phenol
        @BigCoke

        你加了两个波浪号,我咋也没瞅见删除效果捏?

        1. BigCoke
          @Broca-Phenol

          因为我没让评论支持del标签扒

          1. Broca-Phenol
            @BigCoke

            啊→_→嘞,现在我咋就能看见了呢?