Question

我正在使用filter: invert(100%)规则为网站创建深色主题。（讨论了here）

为避免非svg图像和视频发生反转，请将这些元素进行双重反转。这是一个不错的技巧，但是在将它与CSS过渡结合使用时遇到了麻烦。

我的预期效果：将wrapper转换为倒置状态，不影响no-invert元素。这意味着它们根本不受影响，或者两次反转都不需要时间。

我玩了太久了，没有可行的解决方案。 :not()选择器可能有用，或者可能是transition-delay和transition-duration的某种组合。

下面的代码段是不可取的，因为图像仍受父div过渡的影响。

任何帮助将不胜感激，谢谢！

const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('#toggle');
button.onclick = () => {
  wrapper.classList.toggle('dark');
};

.wrapper {
  background: #fff;
  color: #000;
  transition: filter 2s;
}

.dark {
  filter: invert(100%);
  transition: filter 2s;
}

.wrapper .no-invert {
  transition: filter 2s;
}

.dark .no-invert {
  filter: invert(100%);
  transition: filter 2s;
 }

<button id="toggle">Toggle</button>

<div class="wrapper">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  <img src="http://via.placeholder.com/350x150.png" class="no-invert" />
 
</div>

具有过渡功能的CSS双反转滤波器

0 个答案: