简单总结CSS中元素形状的平滑变化

知识分子没文化

发布于 2023-07-01 15:43:31

2580

发布于 2023-07-01 15:43:31

文章被收录于专栏：Roookie博客

前言

将鼠标放到图片上面以查看实现效果：

例子涉及到的相关知识点如下：

一、transition属性 ——设置过渡效果

1.作用：

设置元素变化时的过渡效果

2.属性：

transition属性包括四个子属性，即transition-property、transition-duration、ransition-timing-function、transition-delay，各个属性的含义见下方表格：

值	描述
transition-property	指定哪个元素属性会发生变化
transition-duration	指定过渡效果需要多少秒或毫秒才能完成
ransition-timing-function	指定过渡效果的变化速度曲线
transition-delay	定义过渡效果延迟多长时间开始

注：使用时应该必须指定 transition-duration 属性，否则效果持续时间为0，不会有任何效果

3. 默认值：

all 0 ease 0

4.JavaScript语法：

object.style.transition="width 2s";

5.使用及说明：

举个例子：

存在一个矩形，设置过渡效果为：延迟1s，矩形的宽度变化，过渡时间为0.5s，过渡效果的变化曲线为linear ，代码如下：

.div {
    transition-property: width;
    transition-duration: 0.5s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

上面写法看起来就很繁琐，更别说写起来了。所以为了方便，可以将这几个属性合并成transition 属性，上面的就可以这么写：

.div {
    transition: width 0.5s linear 1s;
    // 部分用不到的属性可以省略，一般都得设置产生过渡变化的属性和过渡时间
}

除了设置单个属性的变化效果，也可以设置多个属性的变化效果，中间用逗号隔开：

 transition: width 2s, height 1s, transform 2s;

二、transform属性 ——变化效果

1.作用：

设置元素的变化效果，与transition属性一起使用可实现元素的平滑变化

2语法：

transform: none|transform-functions;

3.属性值：

值	描述
none	不进行转换。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

更多transform变化属性参考： CSS3 transform 属性 | 菜鸟教程 (runoob.com)

三、效果演示代码

1.html代码

<div class="box">    
    <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/agree.png"
         alt="网络未连接或图片链接已失效" class="agree">
    <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/windmill.png"
         alt="网络未连接或图片链接已失效" class="windmill">
</div>

2.CSS代码

.box {
    display: inline-flex;
    border:1px solid #aaabad;
    margin:10px;
}
.agree {
    width: 60px;
    height: 60px;
    margin: 45px;
    transition: all 0.5s;
}
/* 设置鼠标悬浮到图片上时图片的变化效果 */
.agree:hover {
    transform: scale(1.5);
}
.windmill {
    margin: 30px;
    width: 100px;
    height: 100px;
    transition: all 3s;
}
.windmill:hover {
    transform: rotate(720deg);
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css