CSS3动画效果demo

最新推荐文章于 2024-04-12 05:23:09 发布

#麻辣小龙虾#

最新推荐文章于 2024-04-12 05:23:09 发布

阅读量613

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/CodingNoob/article/details/66972906

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS3动画demo</title>
<meta name="author" content="" />
<style>
    *{margin:0;padding:0;}
    .box{
        position:absolute;
        left:200px;
        top:400px;
        height:100px;
        width:100px;
        background:red;
        color:#fff;
        font-size:20px;
        line-height:100px;
        text-align:center;
    }
    @keyframes boxmove{
        0%{
            top:350px;
            left:290px;
            font-size:20px;
            transform:rotateZ(0deg) scale(1.0);
            background:pink;
        }
        10%{
            top:320px;
            left:390px;
            font-size:24px;
            transform:rotateZ(45deg) scale(1.2);
            background:blue;
        }
        20%{
            top:310px;
            left:410px;
            font-size:26px;
            transform:rotateZ(75deg) scale(1.3);
            background:yellow;
        }
        30%{
            top:300px;
            left:520px;
            font-size:23px;
            transform:rotateZ(95deg) scale(1.5);
            background:yellow;
        }
        55%{
            top:270px;
            left:650px;
            font-size:22px;
            transform:rotateZ(155deg) scale(1.3);
            background:green;
        }
        75%{
            top:230px;
            left:770px;
            font-size:20px;
            transform:rotateZ(225deg) scale(1.2);
            background:#ccc;
        }
        100%{
            top:150px;
            left:1020px;
            font-size:18px;
            transform:rotateZ(360deg) scale(1.0);
            background:pink;
        }
    }
    .box{
        animation:boxmove 3s linear 0s infinite alternate;
    }
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>

#麻辣小龙虾#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画效果demo

<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>CSS3动画demo</title><meta name="author" content="" /><style> *{margin:0;padding:0;} .box{ position:absol
复制链接

扫一扫