CSS3动画——transition（过渡）

最新推荐文章于 2023-06-07 01:25:26 发布

塞上江南果

最新推荐文章于 2023-06-07 01:25:26 发布

阅读量921

点赞数 1

分类专栏： CSS 文章标签： css3 动画

本文链接：https://blog.csdn.net/picking_up_stones/article/details/54866147

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

简介：transition（过渡）字如其名，是用来设置元素由一种状态到另一种状态中间的过渡效果的，比如变化的速度，变化的持续时间等。它主要有4个属性，分别是transition-property（属性，如width,color等），transition-duration（变化持续时间），transition-timing-function（如何变化），transition-delay（延迟时间）。使用方法如下：

一.语法

transition:property duration timing-function delay；

二.参数
1.property：指对哪个属性进行过渡，有三种设置方法，none（不对任何属性进行过渡），all（对所有属性都进行过渡），indent（元素属性名，如width,color等）。
2.duration：规定过渡持续的时间，单位为秒或毫秒（s/ms）。
3.timing-function：过渡的效果：
（1）ease：逐渐变慢，默认值
（2）linear：匀速
（3）ease-in：加速
（4）ease-out：减速
（5）ease-in-out：加速然后减速
（6）cubic-bezier：该值允许你去自定义一个时间曲线，(x1, y1, x2, y2)四个值特定于曲线上点P1和点 P2。所有值需在[0, 1]区域内，否则无效。
4.delay：过渡效果何时开始。

三.小练习

<!DOCTYPE html>
<html>
<head>
    <title>transition的应用</title>
    <style>

    html,body
    {
        margin: 0;
        padding: 0;
        font-size: 36px;
    }

    .demo-parent
    {
        width: 100%;
        height: 700px;
        background: black;
        position: fixed;
        display: flex;
        flex-direction:row;
        justify-content: center;
        padding-top: 260px;
    }

    .demo
    {
        background: yellow;
        transition: 3s linear 1s;
        color: #fff;
        height: 30%;
        text-align: center;
        opacity: 1;
        padding: 10px;
    }

    .demo:hover
    {
        background: #ccc;
        color: green;
        opacity: 0.9;
        border-radius: 5px;
    }

    h1
    {
        font-size: 2em;
    }

    p
    {
        font-size: 1em;
    }



    </style>
</head>
<body>

<div class="demo-parent">
    <div class="demo">
        <h1>我是最大的字</h1>
        <p>注意看我的颜色和背景如何变化哦！</p>
    </div>
</div>

<script type="text/javascript">



</script>

</body>
</html>

效果如图：
这里写图片描述
图片只是个变化的各个阶段的效果，当然过渡不会这么生硬，一切以运行效果为准。

塞上江南果

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画——transition（过渡）

简介：transition（过渡）字如其名，是用来设置元素由一种状态到另一种状态中间的过渡效果的，比如变化的速度，变化的持续时间等。它主要有4个属性，分别是transition-property（属性，如width,color等），transition-duration（变化持续时间），transition-timing-function（如何变化），transition-delay（延迟时间）。使
复制链接

扫一扫

专栏目录