欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用CSS3过渡transition效果实例介绍

程序员文章站 2022-03-11 09:21:34
...
这篇文章主要为大家详细介绍了CSS3过渡transition效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了CSS3过渡transition效果,供大家参考,具体内容如下

效果图:

使用CSS3过渡transition效果实例介绍

实现代码:

transition.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition</title>
    <style>
        #block {     
            width: 400px;     
            height: 300px;     
            background-color: #69C;     
            margin: 0 auto;     

            transition: background-color 1s, width 0.5s ease-out;     
            -webkit-transition: background-color 1s, width 0.5s ease-out;     
        }     
        #block:hover {     
            background-color: red;     
            width: 600px;     
        }     
    </style>
</head>
<body>
    <p id="block">

    </p>
</body>
</html>


transitionDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TransitionDemo</title>
    <style>
        #wrapper {     
            width: 1024px;     
            margin: 0 auto;     
        }     
        .progress-bar-bg {     
            width: 960px;     
            /*background-color: aliceblue;*/     
            background-color: lightyellow;     
        }     
        .progress-bar {     
            height: 40px;     
            width: 40px;     
            background-color: #69C;     

            border: 1px solid lightyellow;     
            border-radius: 5px;     
        }     
        .progress-bar:hover {     
            width: 960px;     
        }     

        #bar1 {     
            -webkit-transition: width 5s linear;     
            /*-webkit-transition: width 5s steps(6, end);*/     
            /*-webkit-transition: width 5s step-start;*/     
        }     
        #bar2 {     
            -webkit-transition: width 5s ease;     
        }     
        #bar3 {     
            -webkit-transition: width 5s ease-in;     
        }     
        #bar4 {     
            -webkit-transition: width 5s ease-out;     
        }     
        #bar5 {     
            -webkit-transition: width 5s ease-in-out;     
        }     
    </style>
</head>
<body>
<p id="wrapper">
    <p>linear</p>
    <p class="progress-bar-bg">
        <p class="progress-bar" id="bar1"></p>
    </p>

    <p>ease</p>
    <p class="progress-bar" id="bar2"></p>

    <p>ease-in</p>
    <p class="progress-bar" id="bar3"></p>

    <p>ease-out</p>
    <p class="progress-bar" id="bar4"></p>

    <p>ease-in-out</p>
    <p class="progress-bar" id="bar5"></p>
</p>
</body>
</html>


结果分析:鼠标移动上去后,会发生过渡动画。

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上就是使用CSS3过渡transition效果实例介绍的详细内容,更多请关注其它相关文章!

相关标签: CSS3 transition