css动画练习

最新推荐文章于 2023-02-09 12:55:27 发布

weixin_30781107

最新推荐文章于 2023-02-09 12:55:27 发布

阅读量117

点赞数

原文链接：http://www.cnblogs.com/liuwujiang/p/9033321.html

版权

HTML部分

<body>
<div></div>
</body>

CSS部分

div{
width:200px;
height:130px;
background-color:red;
padding:20px;
text-align:center;
font-size:18px;

/*设置动画及播放时间*/
animation:myfirst 5s;
/*设置动画轮播次数*/
animation-iteration-count:100;
}
/*规定动画效果*/
@keyframes myfirst {
    0% {
        background-color: #F33;
        margin-left: 0;
        margin-top: 0;
        font-size: 18px;
        transform: rotate(-30deg);
    }
    25% {
        background-color: yellow;
        margin-left: 200px;
        margin-top: 0;
        font-size: 26px;
        /*顺时针旋转45度*/
        transform: rotate(30deg);
    }
    50% {
        background-color: #06F;
        margin-left: 200px;
        margin-top: 200px;
        font-size: 18px;
        transform: rotate(-30deg);
    }
    75% {
        background-color: #0C0;
        margin-left: 0;
        margin-top: 200px;
        font-size: 26px;
        transform: rotate(30deg);
    }
    100% {
        background-color: #F33;
        margin-left: 0;
        margin-top: 0;
        font-size: 18px;
        transform: rotate(-30deg);
    }
}
</style>

转载于:https://www.cnblogs.com/liuwujiang/p/9033321.html

weixin_30781107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画练习

HTML部分<body><div></div></body>CSS部分div{width:200px;height:130px;background-color:red;padding:20px;text-align:center;font-size:18px;/*设置动画及播放时间*/animation:myfirst ...
复制链接

扫一扫