تغییر رنگ div
@salar.mohammad2013 @saghari @ossvahid @Raymond
درود دوستان
ی سوال داشتم
چه کدی بنویسم که رنگ یک div بصورت خودکار پشت سر هم عوض شه؟
مثل این سایت
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
گزارش تخلف
کپی کردن
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 ثانیه یکبار
موفق باشی
گزارش تخلف
کپی کردن
2
سلام برا اینکارا ما از انیمیشن های css استفاده می‌کنیم پیشنهاد میکنم حتما یادش بگیری چون خیلی باحاله
css animation
0
گزارش تخلف
کپی کردن
-1
0
از یک کلاس css با کد زیر استفاده کن. دقیقاً مثل مثالت
.div-colorized {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
color: #fff;
}