【动画开发】animation动画最简单写法

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                border-radius: 50%;
                animation: walk 1s infinite alternate;
            }
            @keyframes walk{
                0%{transform: translate3d(0,0,0) scale(1) rotate(0deg) skew(0deg);}
                100%{transform: translate3d(0,100px,0) scale(1) rotate(90deg) skew(90deg);}
                /*50%{transform: translate3d(200px,100px,0)}*/
                /*75%{transform: translate3d(0,100px,0)}
                100%{transform: translate3d(0,0,0)}*/
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        
    </body>
</html>
复制代码

3d动画转动效果

 

posted @   JeckHui  阅读(523)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
点击右上角即可分享
微信分享提示