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

    css3的过渡效果名是什么

    长期闲置长期闲置2022-01-24 10:32:56原创400

    在css3中,过渡的效果名是“transition”,该属性是一个简写属性,用于规定过渡效果css属性名称、过渡效果的时间、过渡效果的速度曲线和定义过渡效果何时开始,语法为“transition:css属性名 时间 速度曲线 过渡开始;”。

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

    css3的过渡效果名是什么

    transition 属性是一个简写属性,用于设置四个过渡属性:

    注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

    语法为:

    transition: property duration timing-function delay;

    其中:

    01.png

    示例如下:

    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    <div></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
    </body>
    </html>

    输出结果:

    +1.gif

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

    以上就是css3的过渡效果名是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:javascript怎么获取html文件的节点 下一篇:css3怎样实现添加阴影
    PHP编程就业班

    相关文章推荐

    • css中段落边框如何设置• 手把手教你CSS架构之SMACSS• css3如何让盒子水平居中• css怎么设置按钮中的字大小• 手把手教你使用CSS制作动态饼图(附代码)

    全部评论我要评论

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

    PHP中文网