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

    css3怎么实现元素过渡效果

    长期闲置长期闲置2022-04-28 17:17:47原创245

    在css3中,可以利用transition属性实现元素过渡效果,该属性可以设置元素过渡效果的属性名称、过渡时间、过度速度和过渡什么时候开始,语法为“元素{transition:属性名称 时间 速度曲线 delay}”。

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

    css3怎么实现元素过渡效果

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

    语法为:

    transition: property duration timing-function delay;

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:pink;
    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>

    输出结果:

    +6.gif

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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3
    上一篇:jquery怎么改变button的值 下一篇:jquery中each()是什么函数
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• tweenmax能改变css3属性吗• css3中渐变怎么改变角度• css3动画和jquery动画有什么区别• css3支持哪些浏览器内核• css3怎么设置鼠标划过字体会改变
    1/1

    PHP中文网