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

知识分子没文化
2021-04-29 / 0 评论 / 192 阅读 / 正在检测是否收录...

目录:

前言

将鼠标放到实例图片上面以查看实现效果:(若没有效果,请点击此链接单独查看)

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

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

1.作用:

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

2.属性:

transition属性包括四个子属性,即transition-propertytransition-durationransition-timing-functiontransition-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代码

<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>
2

评论 (0)

取消