首页 > 程序开发 > web前端 > HTML/CSS >

做一个从中心向两边水平扩展的动画效果

2017-02-09

用到了css3的transition属性,其实是从左往右扩展的。因为设置了块居中,产生从中心向左右扩展的感觉 box{ background-color:gray; height:20px; overflow:hidden; }

用到了css3的transition属性,其实是从左往右扩展的。因为设置了块居中,产生从中心向左右扩展的感觉

<!doctype html>
<html>
<head>
<style>
    #box{
        background-color:gray;
        height:20px;
        overflow:hidden;
    }
    .a{
        background-color:red;
        width:0;
        height:20px;
        margin: 0 auto;
        transition:width .8s;
        -webkit-transition:width .8s;
    }
    #box:hover .a{
        width:100%;
        transition:width .8s;
        -webkit-transition:width .8s;
    }
</style>
</head>
<body>
<div id="box">
<div class="a"></div>
</div>
</body>
</html>

相关文章
最新文章
热点推荐