CSS3的过渡 transition

最新推荐文章于 2022-04-10 01:05:40 发布

葡萄干是个程序员

最新推荐文章于 2022-04-10 01:05:40 发布

阅读量683

点赞数

分类专栏： Web前端文章标签： html css3 transition

本文链接：https://blog.csdn.net/qq_15096707/article/details/50987328

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

这里只考虑 chrome 的兼容。

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>
    <div id="block">

    </div>
</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>
<div id="wrapper">
    <p>linear</p>
    <div class="progress-bar-bg">
        <div class="progress-bar" id="bar1"></div>
    </div>

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

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

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

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

运行结果如下：

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

葡萄干是个程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的过渡 transition

这里只考虑 chrome 的兼容。transition.html Transition #block { width: 400px; height: 300px; background-color: #69C; margin: 0 auto;
复制链接

扫一扫