ویژه (css) کد فوق العاده زیبا ساخت تخم مرغ متحرک

[Yazdan 1,703]

سلام دوستان

 

توسط کد های زیر میتونید یک تخم مرغ که به چپ و راست تصویر حرکت میکنه ایجاد کنید.

 

 

 

 

کد CSS :

 

    .egg {     display: block;     width: 100px;     height: 150px;     border: 1px dotted teal;     background: radial-gradient(farthest-corner at 50% 100%, darkorange, white);     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;     animation: ani 8s infinite ease-in-out alternate;   }   .egg:before,   .egg:after {     position: absolute;     content: '';     width: 100px;     height: 3px;     top: 302px;     border-radius: 50%;     background: rgba(0, 0, 0, 0.5);   }   .egg:after {     position: absolute;     content: '';     width: 10px;     height: 10px;     top: 300px;     left: 50px;     background: silver;     border: 5px solid black;     border-radius: 50%;     animation: ani_after 8s infinite ease-in-out alternate;   }   @keyframes ani {     0% {       margin-left: 10%;       margin-top: 150px;     }     20% {       margin-left: 10%;       margin-top: 130px;     }     80% {       margin-left: 80%;       margin-top: 130px;     }     100% {       margin-left: 80%;       margin-top: 150px;     }   }   @keyframes ani_after {     0% {       margin-left: 9.6%;       margin-top: -2px;       transform: scale(0, 0);       transform-origin: 100% 50%;       border-width: 0;     }     20% {       margin-left: 9.6%;       margin-top: -24px;       transform: scale(1, 1);       transform-origin: 100% 50%;       border-width: 10px;     }     80% {       margin-left: 78.72%;       margin-top: -24px;       transform: scale(1, 1);       transform-origin: 100% 50%;       border-width: 10px;     }     100% {       margin-left: 78.72%;       margin-top: -2px;       transform: scale(0, 0);       transform-origin: 100% 50%;       border-width: 0;     }   }

 

 

کد html :

 

<div class='egg'></div>

 

 

 

 

 

لینک ها تنها برای اعضای سایت قابل نمایش است.