Такой вопрос. Как можно через JS изменить параметр CSS - background-color, желательно с переходом, не знаю как в JS делается переход, но для справки чтобы переход был как при использовании transition в css.
Код:
HTML:
<html>
<head>
<title>die...</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/1.js"></script>
</head>
<body id="bg2">
<div class="main-text">ВЫБЕРИ  СВОЮ  СТОРОНУ</div>
<audio src="audio/1.mp3" loop="" autoplay=""></audio>
<div class="theme light" id="light2">СВЕТЛАЯ  СТОРОНА</div>
<div class="theme dark">ТЕМНАЯ  СТОРОНА</div>
</body>
</html>
CSS:
|
Код:
|
*{
--back-color: #191919;
--white-color: white;
--theme-color: #3a3a3a;
}
@font-face {
font-family: hard;
src: url(../fonts/1.otf);
}
body {
background-image: url(../img/bg.png);
background-size: 20%;
font-family: "hard", serif;
}
.main-text {
display: flex;
flex-direction: row;
justify-content: center;
color: var(--white-color);
font-family: "hard", serif;
font-size: 64pt;
text-align: center;
animation: glow 1.5s infinite ease-in-out;
margin-bottom: 5%;
margin-top: 10%;
}
.theme {
display: flex;
flex-direction: row;
justify-content: center;
color: var(--theme-color);
font-family: "hard", serif;
font-size: 54pt;
text-align: center;
margin-bottom: 3%;
cursor: pointer;
}
.light:hover {
color: var(--white-color);
transition: 1s;
}
.light:not(:hover) {
color: var(--theme-color);
transition: 1s;
}
.dark:hover {
color: black;
transition: 1s;
text-shadow: 0 0 4px white;
}
.dark:not(:hover) {
color: var(--theme-color);
transition: 1s;
}
@keyframes glow {
from {text-shadow: 0 0 0px var(--white-color)}
50% {text-shadow: 0 0 10px var(--white-color)}
to {text-shadow: 0 0 0px var(--white-color)}
} |