CSS动画-动画

最新推荐文章于 2021-08-04 01:31:49 发布

一叶舟轻-dly

最新推荐文章于 2021-08-04 01:31:49 发布

阅读量211

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/xinzhelantian/article/details/60602743

版权

HTML 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画效果</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>动画效果</div>
</body>
</html>

div{
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
    animation:anim 5s infinite alternate;/*不断执行*/
    -webkit-animation:anim 5s infinite alternate;
}
@keyframes anim{
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background: blue;
        left: 20px;
        top: 0px;
    }
    50% {
        background: #CCFFCC;
        left: 200px;
        top: 200px;
    }
    75% {
        background: #00FFFF;
        left: 0px;
        top: 200px;
    }
    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}
@-webkit-keyframes anim {
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background: blue;
        left: 20px;
        top: 0px;
    }
    50% {
        background: #CCFFCC;
        left: 200px;
        top: 200px;
    }
    75% {
        background: #00FFFF;
        left: 0px;
        top: 200px;
    }
    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
        }

一叶舟轻-dly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画-动画

动画效果动画效果div{ width:100px; height:100px; background-color:red; position:relative; animation:anim 5s infinite alternate;/*不断执行*/ -webkit-animation:anim 5s infinite alte
复制链接

扫一扫