HTML CSS 简单动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{ margin: auto; } td { width: 310px; height: 310px; background-color: darkcyan; overflow: hidden; } tr>td>div { width: 200px; height: 200px; background-color: red; margin: auto; border: 3px black solid; position: relative; overflow: hidden; } p { text-align: center; } @keyframes xz { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #d1 { width: 50px; height: 50px; background-image:repeating-radial-gradient(at center center,blue 5%,yellow 40%); position: absolute; left: 75px; top: 75px; animation: xz 3s linear infinite; } @keyframes sf { 0% { transform: scale(1); } 50% { transform: scale(3); } 100% { transform: scale(1); } } #d2 { width: 50px; height: 50px; background: green; position: absolute; left: 75px; top: 75px; animation: sf 3s linear infinite; } @keyframes py { 0% { transform: translateX(0); } 25% { transform: translateX(-100px); } 50% { transform: translateX(0); } 75% { transform: translateX(100px); } 100% { transform: translateX(0); } } #d3 { width: 50px; height: 50px; background: green; position: absolute; left: 75px; top: 75px; animation: py 3s linear infinite; } @keyframes py2 { 0% { transform: translateY(0); } 25% { transform: translateY(-100px); } 50% { transform: translateY(0); } 75% { transform: translateY(100px); } 100% { transform: translateY(0); } } #d4 { width: 50px; height: 50px; background: green; position: absolute; left: 75px; top: 75px; animation: py2 3s linear infinite; } @keyframes x_xz { 0% { transform: rotateX(0); } 100% { transform: rotateX(360deg); } } #d5 { width: 50px; height: 50px; background: green; position: absolute; left: 75px; top: 75px; animation: x_xz 3s linear infinite; } @keyframes y_xz { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } #d6 { width: 50px; height: 50px; background: green; position: absolute; left: 75px; top: 75px; animation: y_xz 3s linear infinite; perspective: 1000; } @keyframes xy_xz { 0% { transform: rotateY(0); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } #d7 { width: 50px; height: 50px; background: green; position: absolute; left: 75px; top: 75px; animation: xy_xz 3s linear infinite; perspective: 1000; } @keyframes xyz_xz { 0% { transform: rotateY(0); } 50%{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) scale(6); } 100% { transform: rotateX(0) rotateY(0) rotateZ(0) scale(1); } } #d8 { width: 50px; height: 50px; background: green; position: absolute; left: 75px; top: 75px; animation: xyz_xz 6s linear infinite; perspective: 1000; } </style> </head> <body> <table border="1" width="910"> <tr> <td> <p>旋转的个体</p> <div> <div id="d1"></div> </div> </td> <td> <p>缩放的个体</p> <div> <div id="d2"></div> </div> </td> <td> <p>水平平移的个体</p> <div> <div id="d3"></div> </div> </td> <td> <p>垂直平移的个体</p> <div><div id="d4"></div></div> </td> </tr> <tr> <td> <p>x轴旋转的个体</p> <div><div id="d5"></div></div> </td> <td> <p>y轴旋转的个体</p> <div><div id="d6"></div></div> </td> <td> <p>xy轴旋转的个体</p> <div><div id="d7"></div></div> </td> <td> <p>xyz轴旋转且缩放的个体</p> <div><div id="d8"></div></div> </td> </tr> </table> </body> </html>
原文地址：https://blog.csdn.net/laocooon/article/details/144803748
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！