效果

代碼實現
html

 <div class="main"><div class="aixin"></div></div>

css

.main {transform: rotate(-45deg);}.aixin {height: 100px;width: 100px;background-color: red;margin: auto;margin-top: 200px;position: relative;/* transform: rotate(-45deg); */box-shadow: 3px 3px 20px;animation: jump 1s ease-in-out infinite alternate-reverse;}@keyframes jump {0% {transform: scale(1);}100% {transform: scale(1.1);}}.aixin:after {/* 必須寫concent */content: "";width: 100px;height: 100px;border-radius: 50%;background-color: red;position: absolute;top: 0px;left: 55px;}.aixin:before {content: "";width: 100px;height: 100px;border-radius: 50%;background-color: red;position: absolute;top: -55px;left: 0;}