Question

如果将其应用于某些div背景图像，我的动画效果很好，但是当我尝试将某些元素放到下面的内容中时，我尝试禁用content: ''，但失去了动画效果。

这里的目标是使用CSS过滤器反转所有元素，文本和图像的颜色，我尝试了按预期工作的实际设置，并且得到了想要的结果（白色/红色）。我面临的唯一问题是将内容放入div中：

html,
body {
   background-color: #ddd;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;

}

.banner {
   width: 936px;
   height: 288px;
   color: #fff;
   background-color: #cc0000;
   transition: 2s all;
}

.logo {
   width: 298px;
   height: 91px;
}

.banner:before {
   display: block;
   height: 100%;
   content: "";
   background: inherit;
   background-clip: content-box;
   box-sizing: inherit;
   transition: 2s all;
   padding-left: 0;
   filter: brightness(0%) sepia(1) invert(1);
}

.banner:hover:before {
   padding-left: 936px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <title>Demo</title>
      <script src="https://code.jquery.com/jquery-3.4.1.js"
         integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
      </script>
   </head>

   <body>
      <div class="banner">
         <img class="logo" src='https://image.flaticon.com/icons/svg/1852/1852293.svg' />
         <p>Coming soon</p>
         <div class="container">
            <div class="row">
               <div class="col-xs-3">
                  <h1>89</h1>
               </div>
               <div class="col-xs-1">
                  <h1>:</h1>
               </div>
               <div class="col-xs-3">
                  <h1>60</h1>
               </div>
               <div class="col-xs-1">
                  <h1>:</h1>
               </div>
               <div class="col-xs-3">
                  <h1>24</h1>
               </div>
            </div>
         </div>
      </div>

   </body>

</html>

使用padding和CSS滤镜更改div元素的颜色

0 个答案: