11-transition过渡

最新推荐文章于 2022-01-19 17:21:37 发布

℡☞

最新推荐文章于 2022-01-19 17:21:37 发布

阅读量62

点赞数 1

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/qq_43975332/article/details/119796860

版权

HTML与CSS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

过渡三要素

必须要有属性发生变化
必须告诉系统哪个属性需要执行过渡效果
必须告诉系统过渡效果持续时长

过渡的元素

（1）transition-property CSS 属性的名称

none 没有属性会获得过渡效果
all 所有属性都将获得过渡效果
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

/* 告诉CSS width, background-color要添加过渡效果*/
 transition-property:width,background-color;

（2）transition-duration 花费的时间

time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

（3）transition-timing-function 时间曲线

linear 规定以相同速度开始至结束的过渡效果
ease（默认值）规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

（4）transition-delay 延迟开始时间

time 指定秒或毫秒数之前要等待切换效果开始

（5）transition 连写属性

transition 是 transition-property， transition-duration，transition-timing-function，transition-delay的速写形式，

/*transition: 过渡属性 过渡时长 运动速度 延迟时间;*/
transition: background-color 5s linear 0s;
/*给多个属性添加过渡效果也是用逗号隔开*/
transition: width 5s linear 0s,background-color 5s linear 0s;
/*连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素*/
transition: width 5s,background-color 5s,height 5s;
/*如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为*/
transition:all 0s;

文字过渡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            height: 200px;
            background-color: skyblue;
            text-align: center;
            margin: 100px auto;
        }
        div span{
            line-height: 200px;
            transition: font-size 3s linear,marfin-left 3s linear;
        }
        div:hover span{
            font-size: 90px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span>广</span>
        <span>西</span>
        <span>科</span>
        <span>技</span>
        <span>大</span>
        <span>学</span>
    </div>
</body>
</html>

在这里插入图片描述

手风琴案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 960px;
            height: 300px;
            border: 1px solid;
            margin: 50px auto;
            overflow: hidden;
        }
        ul li{
            width: 160px;
            height: 300px;
            float: left;
            transition: width 0.5s;
        }
        ul:hover li{
            width: 100px;
        }
        ul li:hover{
            width: 420px;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="./images/ad7.jpeg" alt=""></li>
        <li><img src="./images/ad8.jpg" alt=""></li>
        <li><img src="./images/ad9.jpeg" alt=""></li>
        <li><img src="./images/ad10.jpg" alt=""></li>
        <li><img src="./images/ad11.jpg" alt=""></li>
        <li><img src="./images/ad12.jpg" alt=""></li>
    </ul>
</body>
</html>

在这里插入图片描述

℡☞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11-transition过渡

过渡三要素必须要有属性发生变化必须告诉系统哪个属性需要执行过渡效果必须告诉系统过渡效果持续时长过渡的元素（1）transition-property CSS 属性的名称 none 没有属性会获得过渡效果 all 所有属性都将获得过渡效果 property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔/* 告诉CSS width, background-color要添加过渡效果*/ transition-property:width,backgrou
复制链接

扫一扫

专栏目录