旋转的方块

最新推荐文章于 2024-07-25 11:52:08 发布

Tony L.Du

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量537

点赞数 1

分类专栏： HTML5 文章标签： html

本文链接：https://blog.csdn.net/Dextrad_ihacker/article/details/53174904

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>会旋转</title>
    </head>
    <style media="screen">
        .demo{
            width: 100px;
            height: 100px;
            background: rgb(135, 219, 18);
            /*声明动画：名字，持续时间，循环次数，播放方式，播放之前或之后的变化是否呈现（是否恢复动画之前的状态）*/
            animation-name: ani1;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier();
            animation-fill-mode: forwards;
        }
        /*定义动画*/
        @keyframes ani1 {
            /*开始状态*/
            0%{
                transform: translateX(0) rotate(0);
            }
            /*结束状态*/
            100%{
                transform: translateX(900px) rotate(720deg);

            }
        }
    </style>
    <body>
        <div class="box">
            <div class="demo"></div>
        </div>
    </body>
</html>

Tony L.Du

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转的方块

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>会旋转</title> </head> <style media="screen"> .demo{ width: 100px; height: 100px;
复制链接

扫一扫

专栏目录