@keyframes error403animation { 0% { transform: rotateZ(0deg); } 40% { transform: rotateZ(-20deg); } 45% { transform: rotateZ(-15deg); } 50% { transform: rotateZ(-20deg); } 55% { transform: rotateZ(-15deg); } 60% { transform: rotateZ(-20deg); } 100% { transform: rotateZ(0deg); } } .error403{ &-body-content{ width: 700px; height: 500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); &-title{ text-align: center; font-size: 240px; font-weight: 700; color: #2d8cf0; height: 260px; line-height: 260px; margin-top: 40px; .error403-0-span{ display: inline-block; position: relative; width: 170px; height: 170px; border-radius: 50%; border: 20px solid #ed3f14; color: #ed3f14; margin-right: 10px; i{ display: inline-block; font-size: 120px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } } .error403-key-span{ display: inline-block; position: relative; width: 100px; height: 190px; border-radius: 50%; margin-right: 10px; i{ display: inline-block; font-size: 190px; position: absolute; left: 20px; transform: translate(-50%,-60%); transform-origin: center bottom; animation: error403animation 2.8s ease 0s infinite; } } } &-message{ display: block; text-align: center; font-size: 30px; font-weight: 500; letter-spacing: 4px; color: #dddde2; } } &-btn-content{ text-align: center; padding: 20px 0; margin-bottom: 40px; } }