• 技术文章 >web前端 >前端问答

    css3中transition是什么意思

    长期闲置长期闲置2022-04-24 17:44:53原创79

    css3中transition是“过渡”的意思,是用于设置元素过渡效果的一个属性;该属性是一个简写属性,能够给元素添加一个过渡动画效果,通过参数可以设置过渡动画的相关操作,语法为“transition:属性名 时间 速度曲线 延迟时间”。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    css3中transition是什么意思

    transition在css3中是过渡的意思。

    transition 属性设置元素当过渡效果

    四个简写属性为:

    语法为:

    transition: property duration timing-function delay;

    其中参数代表如下:

    17.png

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>123</title>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
    }
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    <div></div>
    <p>鼠标移动到 div 元素上,查看过渡效果。</p>
    </body>
    </html>

    输出结果:

    +3.gif

    (学习视频分享:css视频教程

    以上就是css3中transition是什么意思的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:jquery中apply()方法怎么用 下一篇:jquery怎么停止settimeout
    Web大前端开发直播班

    相关文章推荐

    • rgba在css3的含义是什么• css3层次选择器的用法是什么• css3属性选择器的用法是什么• 怎么设置rotate在css3的旋转中心点• rtl在css是什么意思

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网