css transition.html

最新推荐文章于 2024-01-30 08:30:00 发布

学无止境慢慢来

最新推荐文章于 2024-01-30 08:30:00 发布

阅读量111

点赞数

分类专栏： CSS

原文链接：https://www.w3school.com.cn/cssref/pr_transition.asp

版权

CSS 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css transition</title>
    <style>
        /*参考：https://www.w3school.com.cn/cssref/pr_transition.asp
        1.transition: property duration timing-function delay;
        默认值： all 0 ease 0
        JavaScript 语法：object.style.transition="width 2s"

        2.timing-function
        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)，在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
        */
        div {
            width: 100px;
            height: 100px;
            background: blue;
            /*增加过渡。*/
            /*transition: width 2s ease;*/
            /*transition: width 2s linear;*/
            /*transition: width 2s ease-in;*/
            /*transition: width 2s ease-out;*/
            transition: width 2s ease-in-out;
            /*-webkit-transition: width 2s; !* Safari *!*/
        }

        div:hover {
            /*hover的最终效果。*/
            width: 300px;
        }
    </style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css transition.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>transition</title> <style> /*语法*/ /*transition: property duration tim...
复制链接

扫一扫