正文

简单CSS3动画

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body{

            font-size:12px;

            margin:0;padding:0;

        }

        #box{

            width:300px;

            height: 300px;

            margin:100px auto;

            border:1px solid #ccc;

            transition: all 0.3s;

            -webkit-transition: all 0.3s;

        }

        .inner-box{

            width:60px;

            height: 30px;

            margin:100px auto;

            border:1px solid #ccc;

            transition: all 0.3s;

            -webkit-transition: all 0.3s;

        }

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from{transform:rotate(0deg);}

to {transform:rotate(360deg);}

}

        #box:hover{

            border-radius: 50%;

            background:#007aff;

            box-shadow: 5px 10px 10px rgba(0,0,0,.3);

            -webkit-animation: myfirst 3s;

            -webkit-animation-iteration-count:3;

            -webkit-animation-direction:alternate;

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="inner-box"></div>

        <div class="inner-box"></div>

    </div>

</body>

</html>

相关阅读

目录[+]