• 技术文章 >web前端 >css教程

    css动画怎么匀速

    醉折花枝作酒筹醉折花枝作酒筹2021-07-14 13:34:03原创107

    在css中,可以使用transition-timing-function属性设置动画匀速,只需要在元素中添加“transition-timing-function:linear;”样式即可。

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

    ease:

    1、ease:(逐渐变慢)默认值

    2、linear:(匀速)

    3、ease-in:(加速)

    4、ease-out:(减速)

    5、ease-in-out:(加速然后减速)

    6、cubic-bezier

    如:

    <!DOCTYPE html><html lang="en"><head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{margin:0; padding: 0;}
            .icon_down{ width: 0; height: 0; border-left:20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #B03939; transition: all .1s ease-in 0ms; margin:50px auto; cursor: pointer; }
            .icon_down:hover{ transform: rotate(180deg);}
        </style></head><body>
        <p class="icon_down"></p></body></html>

    效果图:鼠标经过旋转180度,

    例子2:

    把鼠标指针放到 p 元素上,其宽度会从 100px 逐渐变为 300px:

    p
    {
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
    }

    效果图:

    鼠标经过后

    推荐学习:css视频教程

    以上就是css动画怎么匀速的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:Css可以干些什么 下一篇:css3有什么用
    VIP会员

    相关文章推荐

    • 网页设计css样式特效代码大全(建议收藏)• css继承样式有哪些• css和html区别是什么• css3和less的区别是什么• Css可以干些什么

    全部评论我要评论

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

    PHP中文网