تغییر رنگ div
@salar.mohammad2013 @saghari @ossvahid @Raymond
درود دوستان
ی سوال داشتم
چه کدی بنویسم که رنگ یک div بصورت خودکار پشت سر هم عوض شه؟
مثل این سایت
ثبت پرسش جدید
پاسخ‌ها
5سلام
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://roocket.ir/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 ثانیه یکبار
موفق باشی
سلام برا اینکارا ما از انیمیشن های css استفاده می‌کنیم پیشنهاد میکنم حتما یادش بگیری چون خیلی باحاله
css animation
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
وحید راست میگه اینکارا با انیمیشنای css انجام میشه هم راحت تره هم مرورگرو درگیر نمیکنه
از یک کلاس css با کد زیر استفاده کن. دقیقاً مثل مثالت
.div-colorized {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
color: #fff;
}