【动画开发】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动画转动效果
本文来自博客园,作者:JeckHui;
个人主页:前端实用站点推荐; 热榜资讯早读:热榜资讯-导航;
转载请注明原文链接:https://www.cnblogs.com/xiaohuizhang/p/12504402.html