效果
代码 <!DOCTYPE html> <head> <title></title> <style> @keyframes shaking { 0% { transform: translateY(-10px); } 50% { transform: translateY(10px); } 100% { transform: translateY(-10px); } } .animate-1 { width: 40px; height: 40px; background-color: red; margin: 100px auto; /*animation: swing1 1s ease-in-out infinite;*/ animation: shaking 1s infinite; transform: rotate(-5deg); transform-origin: top center; border-radius: 50%; } .animate-2 { width: 40px; height: 40px; background-color: red; margin: 100px auto; animation: swing1 1s ease-in-out infinite; /*animation: shaking 1s infinite;*/ transform: rotate(-5deg); transform-origin: top center; border-radius: 50%; } @keyframes swing1 { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); } } </style> </head> <body> <div class="animate-1"></div> <div class="animate-2"></div> </body> </html>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
