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