مهدی
11 ماه پیش توسط مهدی مطرح شد
5 پاسخ

تغییر رنگ div

@salar.mohammad2013 @saghari @ossvahid @Raymond
درود دوستان
ی سوال داشتم
چه کدی بنویسم که رنگ یک div بصورت خودکار پشت سر هم عوض شه؟
مثل این سایت


ثبت پرسش جدید
مهدی میرابی
تخصص : full-stack developer
@mmirabi 11 ماه پیش آپدیت شد
0

سلام

HTML:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="myDiv">Hello, World!</div>
    <script src="script.js"></script>
</body>
</html>

CSS :

:root {
  --start-color: #f1c40f; /* رنگ شروع */
  --end-color: #9b59b6; /* رنگ پایانی */
}

#myDiv {
  width: 100vw;
  height: 100vh;
  padding: 20px;
  color: white;
  text-align: center;
  background: linear-gradient(45deg, var(--start-color), var(--start-color));
  transition: background 2s ease, filter 2s ease; /* انیمیشن تغییر پس‌زمینه و افکت */
}

/* افکت تغییر رنگ */
#myDiv.effect {
  filter: hue-rotate(360deg);
}

JavaScript:

const myDiv = document.getElementById('myDiv');

function changeColors() {
  const startColor = getRandomColor();
  const endColor = getRandomColor();

  document.documentElement.style.setProperty('--start-color', startColor);
  document.documentElement.style.setProperty('--end-color', endColor);

  // اعمال انیمیشن
  myDiv.style.background = `linear-gradient(45deg, ${startColor}, ${endColor})`;
  myDiv.classList.add('effect'); // اضافه کردن کلاس با افکت
  setTimeout(() => {
    myDiv.classList.remove('effect'); // حذف کلاس برای تکمیل افکت
  }, 2000); // مدت زمان انیمیشن
}

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

setInterval(changeColors, 5000); // تغییر رنگ هر 5 ثانیه یکبار

موفق باشی


oss_vahid
تخصص : wp developer
@ossvahid 11 ماه پیش مطرح شد
2

سلام برا اینکارا ما از انیمیشن های css استفاده می‌کنیم پیشنهاد میکنم حتما یادش بگیری چون خیلی باحاله
css animation


محمد حسین
تخصص : mevn stack
@saghari 11 ماه پیش مطرح شد
0

وحید راست میگه اینکارا با انیمیشنای css انجام میشه هم راحت تره هم مرورگرو درگیر نمیکنه


مهدی
تخصص : توسعه دهنده فرانت اند
@mehdi8686h 11 ماه پیش مطرح شد
-1

@mmirabi @ossvahid @saghari
ممنون از پاسختون دوستان


میلاد
تخصص : مدیر IT
@mildason 11 ماه پیش مطرح شد
0

از یک کلاس css با کد زیر استفاده کن. دقیقاً مثل مثالت

.div-colorized {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: #fff;
}

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام