💡 Magic Lamp Effect with HTML, CSS, JS – Must See!
عمل لمبه تنير وتطفىْ باستخدام html,css and js تأثير قوى ومميز جدا جربه بنفسك
عمل لمبه تنير وتطفىْ باستخدام html,css and js تأثير قوى ومميز جدا جربه بنفسك
فى هذا المقال سوف تنعرف على طريقه عمل تأثير(effect) المبه تنور وتطفى بلغه html , css , javascript.
عمل HTML lamp effect مميز جدا.
تأثير قوى جدا ومميز.
الخطوات
1. كود html عباره عن زر (button) و div به الصوره
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lamp</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lamp-box">
<img id="lamp" src="lamp-off.png" alt="lamp" />
</div>
<button id="toggle">ON / OFF</button>
<script src="main.js"></script>
</body>
</html>
2.كود css عباره عن تنسيق عادى للصفحه.
وطبعا يوجد تأثير ظريف جدا glow على اللمبه يعمل عند اضاءه اللمبه .
css
body {
background: #0b0f1a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.lamp-box {
position: relative;
width: 220px;
}
.lamp-box img {
width: 100%;
display: block;
transition: 0.3s ease;
}
.lamp-box.glow::after {
content: "";
position: absolute;
inset: -30px;
background: #00f7ff;
filter: blur(60px);
opacity: 0.9;
z-index: -1;
}
button {
margin-top: 40px;
width: 100px;
height: 40px;
background-color: transparent;
color: white;
border: 2px solid #00f7ff;
font-size: 16px;
padding: 10px;
cursor: pointer;
}
button:hover {
background-color: rgb(0 247 255 / 60%);
}
3. كود js عند الضغط على زر on/off يعمل switch للمبه يجعلها تنير وتطفئ
js
const lamp = document.getElementById("lamp");
const box = document.querySelector(".lamp-box");
const btn = document.getElementById("toggle");
let isOn = false;
btn.onclick = () => {
isOn = !isOn;
lamp.src = isOn ? "lamp-on.png" : "lamp-off.png";
box.classList.toggle("glow", isOn);
};
