как сделать что бы отключались/включались все css эффекты на странице одной кнопкой?

Рейтинг: 1Ответов: 1Опубликовано: 28.01.2023

можно ли как то сделать что бы на странице сделать кнопку которая отключает все эффекты, и наоборот включает?

css
Источник: Stack Overflow на русском

Ответы

▲ 0

Вопрос понравился. На CSS такое сделать нельзя, но вот при помощи JS вполне. Как кнопка для тестирования.

let btn = document.getElementById("btn_animation");
let nodes = document.querySelectorAll("div, span, li");


btn.addEventListener("click", evt => {
   for (var i = 0; i < nodes.length; i++) {
      nodes[i].classList.toggle('effect_off')
    }
  
})
body{
  position: relative;
  margin: 0;
  overflow-x:hidden;
  max-width: 100vw;
}


#btn_animation{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  border: 1px solid #000;  
}
.effect_off{
  animation:none!important;
}



.cl{
  width: 40px;
 height: 40px;
 background-color: #d00;
 margin: 10px;
 animation: moveLeft 1s infinite;
}

@keyframes moveLeft{
  0%, 100%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(100%);
  }
}

.s1{
  display: inline-block;
  width: 80px;
 height: 80px;
 background-color: #ff0;
 margin: 10px;
 animation: moveLeft 1s infinite 1s;
}
li{
  padding: 10px;
  border: 1px solid #000;
  animation: moveLeft 3s infinite;
}
<button id="btn_animation">Туши Свет</button>
<div class="cl"></div>
<span class="s1"></span>
<ul>
  <li>Test1</li>
  <li>Test2</li>
  <li>Test3</li>
</ul>