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

目录：

• 前言
• 一、transition属性 ——设置过渡效果
  • 1.作用：
  • 2.属性：
  • 3. 默认值：
  • 4.JavaScript语法：
  • 5.使用及说明：
• 二、transform属性 ——变化效果
  • 1.作用：
  • 2语法：
  • 3.属性值：
• 三、效果演示代码
  • 1.html代码
  • 2.CSS代码

前言

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

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

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

1.作用：

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

2.属性：

transition属性包括四个子属性，即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.属性值：

更多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代码

<style>
.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);
}
</style>