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

[Yazdan 1,703]

سلام دوستان

 

توسط این سورس مد میتونید یک چشم فوق العاده زیبا بصورت متحرک و طراحی نوین بسازید. پیشنهاد میکنم حتما امتحان کند.

 

 

 

 

 

کد html :

 

<div class="rotator-outside"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="cover"></div></div><main class="eye"> <div class="rotator">   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div>   <div class="line"></div> </div> <div class="outline"></div> <div class="ball"></div> <div class="pupil"></div></main>

 

 

 

کد css :

 

body { width: 100%; height: 100%; background: #236F61; overflow: hidden;}.eye { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 200px; height: 200px; border: 8px solid white; border-radius: 140px 0 140px 0; background: #236F61; -webkit-transform: rotate(45deg);         transform: rotate(45deg); overflow: hidden; box-shadow: #1e5f53 0 0 0 8px;}.eye .outline { position: absolute; top: -8px; left: -8px; width: 200px; height: 200px; border: 8px solid transparent; border-radius: 140px 0 140px 0; box-shadow: inset #236F61 0 0 0 8px;}.ball { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 3; width: 80px; height: 80px; background: #236F61; border: 8px solid white; border-radius: 100%; box-shadow: #236F61 0 0 0 8px;}.pupil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 4; width: 20px; height: 20px; border: 8px solid white; border-radius: 100%; -webkit-animation: look-around-you 9s linear alternate infinite;         animation: look-around-you 9s linear alternate infinite;}.line { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 2px; height: 360px; background-color: white;}.line:nth-child(1) { -webkit-transform: rotate(10deg);         transform: rotate(10deg);}.line:nth-child(2) { -webkit-transform: rotate(20deg);         transform: rotate(20deg);}.line:nth-child(3) { -webkit-transform: rotate(30deg);         transform: rotate(30deg);}.line:nth-child(4) { -webkit-transform: rotate(40deg);         transform: rotate(40deg);}.line:nth-child(5) { -webkit-transform: rotate(50deg);         transform: rotate(50deg);}.line:nth-child(6) { -webkit-transform: rotate(60deg);         transform: rotate(60deg);}.line:nth-child(7) { -webkit-transform: rotate(70deg);         transform: rotate(70deg);}.line:nth-child(8) { -webkit-transform: rotate(80deg);         transform: rotate(80deg);}.line:nth-child(9) { -webkit-transform: rotate(90deg);         transform: rotate(90deg);}.line:nth-child(10) { -webkit-transform: rotate(100deg);         transform: rotate(100deg);}.line:nth-child(11) { -webkit-transform: rotate(110deg);         transform: rotate(110deg);}.line:nth-child(12) { -webkit-transform: rotate(120deg);         transform: rotate(120deg);}.line:nth-child(13) { -webkit-transform: rotate(130deg);         transform: rotate(130deg);}.line:nth-child(14) { -webkit-transform: rotate(140deg);         transform: rotate(140deg);}.line:nth-child(15) { -webkit-transform: rotate(150deg);         transform: rotate(150deg);}.line:nth-child(16) { -webkit-transform: rotate(160deg);         transform: rotate(160deg);}.line:nth-child(17) { -webkit-transform: rotate(170deg);         transform: rotate(170deg);}.line:nth-child(18) { -webkit-transform: rotate(180deg);         transform: rotate(180deg);}.line:nth-child(19) { -webkit-transform: rotate(190deg);         transform: rotate(190deg);}.line:nth-child(20) { -webkit-transform: rotate(200deg);         transform: rotate(200deg);}.rotator { position: absolute; top: -40%; left: -40%; width: 180%; height: 180%; -webkit-animation: rotator 8s linear infinite;         animation: rotator 8s linear infinite;}.rotator-outside { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; max-width: 700px; max-height: 600px; border-radius: 100%; overflow: hidden; -webkit-animation: rotator 14s linear infinite;         animation: rotator 14s linear infinite;}.rotator-outside .line { height: 100%; background: #17483f;}.rotator-outside .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; box-shadow: inset #236F61 0 0 80px 140px; border-radius: 100%;}@-webkit-keyframes rotator { 100% {   -webkit-transform: rotate(360deg);           transform: rotate(360deg); }}@keyframes rotator { 100% {   -webkit-transform: rotate(360deg);           transform: rotate(360deg); }}@-webkit-keyframes look-around-you { 19% {   -webkit-transform: translate3d(0, 0, 0);           transform: translate3d(0, 0, 0); } 20% {   -webkit-transform: translate3d(4px, -4px, 0);           transform: translate3d(4px, -4px, 0); } 30% {   -webkit-transform: translate3d(4px, -4px, 0);           transform: translate3d(4px, -4px, 0); } 50% {   -webkit-transform: translate3d(4px, -4px, 0);           transform: translate3d(4px, -4px, 0); } 54% {   -webkit-transform: translate3d(-4px, -4px, 0);           transform: translate3d(-4px, -4px, 0); } 70% {   -webkit-transform: translate3d(-4px, -4px, 0);           transform: translate3d(-4px, -4px, 0); } 72% {   -webkit-transform: translate3d(4px, 4px, 0);           transform: translate3d(4px, 4px, 0); } 80% {   -webkit-transform: translate3d(4px, 4px, 0);           transform: translate3d(4px, 4px, 0); } 85% {   -webkit-transform: translate3d(0, 0, 0);           transform: translate3d(0, 0, 0); } 100% {   -webkit-transform: translate3d(0, 0, 0);           transform: translate3d(0, 0, 0); }}@keyframes look-around-you { 19% {   -webkit-transform: translate3d(0, 0, 0);           transform: translate3d(0, 0, 0); } 20% {   -webkit-transform: translate3d(4px, -4px, 0);           transform: translate3d(4px, -4px, 0); } 30% {   -webkit-transform: translate3d(4px, -4px, 0);           transform: translate3d(4px, -4px, 0); } 50% {   -webkit-transform: translate3d(4px, -4px, 0);           transform: translate3d(4px, -4px, 0); } 54% {   -webkit-transform: translate3d(-4px, -4px, 0);           transform: translate3d(-4px, -4px, 0); } 70% {   -webkit-transform: translate3d(-4px, -4px, 0);           transform: translate3d(-4px, -4px, 0); } 72% {   -webkit-transform: translate3d(4px, 4px, 0);           transform: translate3d(4px, 4px, 0); } 80% {   -webkit-transform: translate3d(4px, 4px, 0);           transform: translate3d(4px, 4px, 0); } 85% {   -webkit-transform: translate3d(0, 0, 0);           transform: translate3d(0, 0, 0); } 100% {   -webkit-transform: translate3d(0, 0, 0);           transform: translate3d(0, 0, 0); }}

 

 

 

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

 

 

 

موفق باشید.