本文主要是介绍div 左右、上下摆动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果
代码
<!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>这篇关于div 左右、上下摆动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
