transition的使用

最新推荐文章于 2024-09-18 20:39:31 发布

weixin_33872660

最新推荐文章于 2024-09-18 20:39:31 发布

阅读量83

点赞数

文章标签： python java

原文链接：https://my.oschina.net/u/2511906/blog/724499

版权

2019独角兽企业重金招聘Python工程师标准>>>

#是id选择器，比喻 #bar 只对 id=bar 的标签有效，.是class选择器，比喻 .progress-bar 会对所有有 class="progress-bar" 的标签有效。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!DOCTYPE html>

<html> <head> <title></title> <style> #wrapper{ width:1024px; margin:0 auto; } .progress-bar{ height:40px; width:40px; background-color:green; } .progress-bar:hover{ width:960px; }

    #bar1{
        transition: width 5s linear;
    }
    #bar2{
        transition: width 5s ease;
    }
    #bar3{
         transition: width 5s ease-in;
    }
    #bar4{
        transition: width 5s ease-out;
    }
    #bar5{
        transition: width 5s ease-in-out;
    }
</style>

</head> <body>

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

转载于:https://my.oschina.net/u/2511906/blog/724499