过度失效

jike_1041686226 CSS3 动画属性简介及弹球效... 最后由 jike_9617547 于2016年11月21日回复

  • 6 回答
  • 1.8k 浏览
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            margin: 50px auto;
            background: red;
            border-radius: 10%;
        }
        .div1:hover{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            border-radius:50%;
            background: #2732ff;
            -webkit-transition-property:border-radius,width ,height;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: ease-in;
            -webkit-transition-delay: 1s;
            transition-property:border-radius,width ,height;
            transition-duration: 1s;
            transition-timing-function: ease-in;
            transition-delay: 1s;
        }
    </style>
</head>

<body>
<div class="div1">

</div>
</body>
</html>
  • qq_wdfkjq25 2015年12月04日 回答 #4楼
  • 我这边测试,你写的没问题呀,你用的什么浏览器?

  • 0 评论
  • jike_9617547 2016年11月21日 回答 #5楼
  • .box{

    width: 100px;

    height: 100px;

    margin: 100px auto;

    background-color: red;

    transition-property: width height border-radius;  

    transition-duration: 1s;

    }

    .box:hover{

    width: 200px;

    height: 200px;

    border-radius: 50%;

    background-color: black;

    transition-property: width height border-radius background-color;  

    transition-duration: 1s;

    transition-timing-function: ease-in;

    transition-delay: 1s;

    }

  • 0 评论