css3动漫效果

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

0% 是动画的开始,100% 是动画的完成。

使一个盒子无限制次数移动变色并旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width:150px;
        height:150px;
        margin:50px;
        background:#f00;
        border-radius:50%;
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        color:#fff;
        font-size:20px;
        animation: my 5s infinite;
    }
    /* 动画效果 */
    @keyframes my{
        0%{ transform: rotate(30deg);
        }
        25%{transform:translate(500px ,0px) rotate(0deg);background:#0f0;}
        50%{transform:translate(0px,0px) rotate(360deg);background:#00f}
        100%{transform:translate(0px,0px) rotate(360deg);}
    }
    </style>
</head>
<body>
    <div>一段文字</div>
</body>
</html> 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页