...

دکمه‌ رنگین‌کمانی نورانی متحرک در المنتور

در این آموزش از آکادمی تیچرنت، شما یاد خواهید گرفت که چگونه با استفاده از CSS یک دکمه جذاب با افکت نورانی و چرخشی رنگین‌کمانی در صفحه‌های وب ایجاد کنید. این تکنیک به شما امکان می‌دهد تا دکمه‌هایی با ظاهر خاص و انیمیشن‌های چشم‌نواز بسازید که می‌توانند تجربه کاربری وب‌سایت شما را جذاب‌تر و حرفه‌ای‌تر کنند.

کد مورد استفاده در آموزش دکمه‌ رنگی نورانی متحرک

/* keeps the button on top of the glow */ .galactic-button {   z-index: 1; }  /* css for the glowing effect */ .galactic-button:before {   content: '';   position: absolute;   z-index: -1;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); 	border-radius: 50%; 	pointer-events: none; 	/* adjust the width and height keeping them both the same size */   width: 200px;   height: 200px; 	/* adjust the colors here */   background: conic-gradient(from 0deg, #ff007f, #ffbf00, #00ffbf, #00d4ff, #ff007f); 	/* adjust the speed of the animation */   animation: swirl 3s infinite linear; 	/* adjust the blur */   filter: blur(50px); 	/* adjust the opacity */   opacity: 0.5; }   /* Swirl Animation */ @keyframes swirl {   0% {     transform: translate(-50%, -50%) rotate(0deg);   }   100% {     transform: translate(-50%, -50%) rotate(360deg);   } }

مدرس: امیر آزادمنش

زمان: 11:32 دقیقه

مشاهده در آپارات

بفرست برای دوستت:
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.