HTML——css使用过渡-transition

最新推荐文章于 2024-10-07 23:36:42 发布

only_tao

最新推荐文章于 2024-10-07 23:36:42 发布

阅读量453

点赞数

分类专栏： HTML 文章标签： css html css3

本文链接：https://blog.csdn.net/only_tao/article/details/104116734

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

　　　　　　　　　过渡　transition

　　通过 CSS3，我们可以在不使用 Flash 动画(即将淘汰)或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，可用于鼠标悬停(hover)时的一系列动作。

<html>
<head>
    <title>

        使用过渡: use the "transition"
    </title>
    <style>
    .w1{
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
    }     
    .w1:hover{
        /*hover悬停*/
        width: 300px;
        height: 300px;
        background-color: crimson;
        transition-delay: 1s;
        /* delay延迟1s后执行 */
        transition-duration: 1s;
        /* 变化时间xx ->持续时间n. 如果时长未规定，
        则不会有过渡效果,默认值是 0。效果开始于指定的 CSS 属性改变值时*/
        transition-property: width,background-color;
        /*:后面也可以是其他元素，如background*/
                   /* 性质特性  表示width瞬间变化，长则按照duration规定。 */
         transition-timing-function:linear;
        /*支持不同的浏览器*/
        -o-transition-duration: 1s;/*opera*/
        -webkit-transition-duration:1s;	/* Safari 和 Chrome */
        -moz-transition-duration: 1s;/*火狐*/
    }
    </style>
</head>
<body>
    <p class="w1">try the transition</p>
</body>
</html>

　　
将含有transition放在w1里同样有用
若要写多个效果，在每一个效果中添加逗号如：
　　transition-property: width,background-color;
不同transition-timing-function: linear的属性

linear	均速（等于 cubic-bezier(0,0,1,1)）
ease	由慢变快（等于cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	慢速开始 (等于 cubic-bezier(0.42,0,1,1)）。
ease-out	结束慢速（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	慢开始与结束（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	自定义0~1的值