2

Есть ли способ получения текущего значения цвета подложки для потомка. Приведу пример

body{
 background-color: #000;
}

.wrapper {
  position: relative;
  width: 300px;
  height: 100px;
  background: black linear-gradient(90deg, #FF922C, #FF1E5F);
}

.block {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  box-sizing: border-box;
  transform: translate(0, 50%);
  animation: movingBlock 3s alternate infinite;
}

@keyframes movingBlock {
  0% {
    transform: translate(0, 50%);
  }
  100% {
    transform: translate(250px, 50%);
  }
}
<div class="wrapper">
  <div class="block"></div>
</div>

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

*Я понимаю что задачу можно решить через добавления именно потомку background: linear-gradient, а потом сделать анимацию по перемещению background-position, но возможно есть способ легче ?

1 ответ 1

4

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

Это можно реализовать с помощью применения маски SVG.

В качестве маски будет применяться маленький квадрат class="block" -- 50px x 50px, у которого будет закраска fill="white" и тем самым под этой частью маски будет виден участок родителя class="wrapper" -- 300px x 100px, остальная часть родителя будет скрыта той же маской.

С помощью анимации движения маски, пробегаем по всей длине родителя.

Более подробно смотрите в комментариях кода:

body{
 background-color: black;
}


.wrapper {
  position: relative;
  width: 300px;
  height: 100px;
   fill:  url(#grad1);
}

.block {
  width: 50px;
  height: 50px;
  
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="300" height="100" viewBox="0 0 300 100" > 
<defs>
  <linearGradient id="grad1"  x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#FF922C" />
      <stop offset="100%" style="stop-color:#FF1E5F" />
    </linearGradient>
	<mask id="msk1" >

<!-- Маска вырезает квадрат 50 х 50px и показывает через отверстие -->
<!-- часть  родителя, остальная часть родителя скрыта той же маской -->

<rect class="block" width="50px" height="50px" fill="white"  >
      <!-- Движение маски от нуля вправо на 250px, затем назад  -->
       <!-- Повторение цифр обеспечивает паузы в конечных положениях  -->
	  <animate
      attributename="x"
      dur="6s"
      values="0;250;250;0;0"
      fill="freeze"
      repeatCount="indefinite" />	
    </rect>
	</mask>
</defs>		 
   <!-- Маски применяется к родителю  -->
<rect class="wrapper" width="300" height="100" mask="url(#msk1)" /> 		 
</svg>

Для наглядности покажем копию родителя

body{
 background-color: black;
}
.container {
width: 300px;
  height: 100px;
  background:  linear-gradient(90deg, #FF922C, #FF1E5F);
  margin-bottom:10px;
  
}
.wrapper {
  position: relative;
  width: 300px;
  height: 100px;
   fill:  url(#grad1);
}

.block {
  width: 50px;
  height: 50px;
  
}
<!-- Эта строка реализует для наглядности показ копии родителя  -->
<div class="container"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="300" height="100" viewBox="0 0 300 100" > 
<defs>
  <linearGradient id="grad1"  x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#FF922C" />
      <stop offset="100%" style="stop-color:#FF1E5F" />
    </linearGradient>
	<mask id="msk1" >

<!-- Маска вырезает квадрат 50 х 50px и показывает через отверстие--> 
<!--часть  родителя, остальная часть родителя скрыта той же маской -->

<rect class="block" width="50px" height="50px" fill="white"  >
      <!-- Движение маски от нуля вправо на 250px, затем назад  -->
	    <animate
          attributename="x"
          dur="6s"
          values="0;250;250;0;0"
          fill="freeze"
          repeatCount="indefinite" />
      </rect> 		
	</mask>
</defs>		 
   <!-- Маски применяется к родителю  -->
<rect class="wrapper" width="300" height="100" mask="url(#msk1)" /> 		 
</svg>

Ещё пример с более сложным, повторяющимся градиентом

body{
 background-color: black;
}

.wrapper {
  position: relative;
  width: 300px;
  height: 100px;
   fill:  url(#grad1);
}

.block {
  width: 50px;
  height: 50px;
  
}
<div class="container">

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="300" height="210" viewBox="0 0 300 210" > 
<defs>
  
      <linearGradient id="grad1"
                spreadMethod="repeat"
                x1="0" y1="50%" x2="33.5%" y2="50%">
            <stop offset="0%" stop-color="crimson"
                  class="stop-1"/>
            <stop offset="49%" stop-color="gold"
                  class="stop-2"/>
            <stop offset="50%" stop-color="lemonchiffon"
                  class="stop-2"/>
            <stop offset="51%" stop-color="gold"
                  class="stop-2"/>
            <stop offset="100%" stop-color="teal"
                  class="stop-3"/>
          </linearGradient>
  
	<mask id="msk1" >
  
<!-- Маска вырезает квадрат 50 х 50px и показывает через отверстие -->
<!--часть  родителя, остальная часть родителя скрыта той же маской -->
	
  <rect class="block" x="0" y="110" width="50px" height="50px" fill="white"  >
      <!-- Движение маски от нуля вправо на 250px, затем назад  -->
	  <animate
        attributename="x"
        dur="12s"
        values="0;250;250;0;0"
        fill="freeze"
        repeatCount="indefinite" />
	  </rect>	 
	</mask>
</defs>	
      <!-- Образец - копия родителя для наглядности. Эту строку в рабочем приложении нужно будет удалить -->
<rect	class="example" x="0"  y="0" width="300" height="100" fill="url(#grad1)" />
   <!-- Маски применяется к родителю  -->
<rect class="wrapper" x="0" y="110" width="300" height="100" mask="url(#msk1)" /> 		 
</svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.