CSS3 transitions and transformations (一) || CSS3 过渡与转换（一）

最新推荐文章于 2024-05-18 06:08:21 发布

CSDN_Alex_

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量106

点赞数 1

分类专栏： CSS CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/CSDN_Alex_/article/details/111083568

版权

CSS 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

CSS3

7 篇文章 0 订阅

订阅专栏

CSS3 转换（transition）

允许我们在限定的时间内从一个属性值转换到另一个属性值。

transition-property 指定要转换的属性。
transition-duration 指定转换发生的持续时间。
transition-timing-function 指定转换的速度在其持续时间内如何变化。
transition-delay 指定过渡效果的延迟，以秒为单位。

处理兼容

.one{
        width: 100px;
        height: 100px;
        background: red;
        color: #fff;
        transition-property: height;
        transition-duration: 2s;
        /*兼容 Firefox 4*/
        -moz-transition-property: height;
        -moz-transition-duration: 2s;
        /*兼容 Safari and Chrome*/
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        /*兼容 Opera*/
        -o-transition-property: height;
        -o-transition-duration: 2s;
        /*匀速（线性）*/
        transition-timing-function: linear;
    }

CSS3 旋转

CSS3中的 transform: rotate()允许您对指定元素进行旋转操作，使其旋转指定的角度。

<style>
    .one{
        margin-left: 20px;
        width: 100px;
        height: 100px;
        margin-top: 30px;
        background-color: #32CD32;
        transition: transform 1s linear;
    }
    .one:hover{
        /*旋转角度，有正负值*/
        transform: rotate(15deg);
    }
</style>


<body>
    <div class="one"></div>
</body>

CSS3 基点

CSS3 中的transform-origin属性允许您更改被转换元素的位置（基点）。该属性的默认值为 50% 50%，对应于元素的正中间。

CSS3 平移

transform: translate()从当前位置移动一个元素（根据给定的 x 轴和 y 轴的参数，该参数有正负值）

<style>
    .translateDiv{
        margin-left: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
        transition: transform 1s linear;
    }
    .translateDiv:hover{
        /*div 元素向右移动 120px，向下移动 60px*/
        transform: translate(120px, 60px);
    }
</style>
<body>
    <div class="translateDiv"></div>
</body>

CSS3 倾斜

transform: skew()通过给元素设置 x 轴和 y 轴的倾斜角度来实现倾斜。

<style>
    .skewDiv{
        margin-left: 50px;
        width: 100px;
        height: 100px;
        background-color: #32CD32;
        transition: transform 1s linear;
    }
    .skewDiv:hover{
        /*通过给元素设置 x 轴和 y 轴的倾斜角度实现元素倾斜效果*/
        transform: skew(45deg);
        -webkit-transform: skew(45deg);
    }
</style>
<body>
<div class="skewDiv"></div>
</body>

CSDN_Alex_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transitions and transformations (一) || CSS3 过渡与转换（一）

CSS3 转换（transition）允许我们在限定的时间内从一个属性值转换到另一个属性值。transition-property 指定要转换的属性。transition-duration 指定转换发生的持续时间。transition-timing-function 指定转换的速度在其持续时间内如何变化。transition-delay 指定过渡效果的延迟，以秒为单位。处理兼容.one{ width: 100px; height: 100px;
复制链接

扫一扫