CSS transition动画没效果
CSS transition动画没效果
落叶伴长风 发表于1年前
CSS transition动画没效果
  • 发表于 1年前
  • 阅读 35
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

今天在使用transition 的时候发现没效果,代码如下

当鼠标移动到.m1选中的div .m2 移动时有过度效果 但是缺没有效果

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <style>
    *{
        margin: 0;
        padding: 0;
    }


    .m1{

        background-color: #aaa;

    }
    .m2{
        position: relative;
        background-color: #bbb;
        transition: all 0.4s ease-in; /*属性 时间 动作效果 .延迟.*/
 
    }
    .m1:hover .m2{
        left: 200px;
    }
    </style>



</head>

<body >
    <div class="m1" style="height: 300px; width: 200px;">
        <div class="m2" style="height: 100px; width: 90px;">

        </div>

    </div>

</body>

</html>

后来发现原来需要给属性添加一个初始值,效果才会被激发

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <style>
    *{
        margin: 0;
        padding: 0;
    }


    .m1{

        background-color: #aaa;

    }
    .m2{
        position: relative;
        background-color: #bbb;
        transition: all 0.4s ease-in;
       left:0; /*一定要加上*/
 
    }
    .m1:hover .m2{
        left: 200px;
    }
    </style>



</head>

<body >
    <div class="m1" style="height: 300px; width: 200px;">
        <div class="m2" style="height: 100px; width: 90px;">

        </div>

    </div>

</body>

</html>

 

标签: transition css3
共有 人打赏支持
粉丝 0
博文 61
码字总数 7974
×
落叶伴长风
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: