Как показать анимацию, которая скрыта за цветным элементом, используя «открыть» элемент на поверхности - PullRequest
Новая
       1

Как показать анимацию, которая скрыта за цветным элементом, используя «открыть» элемент на поверхности

8 голосов
/ 02 мая 2020

Представьте, что у нас есть два слоя фона.

  • Нижний слой зеленого цвета <div class="green"></div>. Для простоты предположим, что это просто цвет. Но в моем проекте этот слой содержит css анимацию .

  • И поверх него еще один слой синего цвета <div class="blue"></div>.

  • Теперь я хочу иметь еще один div, который идет поверх обоих, и он показывает зеленый фон (слой анимации в моем проекте).

Самый близкий пример, который я могу придумать, это если вы представляете себе прожектор. Все кажется черным, и прожектор движется и раскрывает фон.

По сути, это то, что у меня есть: 

<div class="green">
    <div class="blue">
        <div class="reveal"></div>
    </div>
</div>

Это будет выглядеть примерно так. Просто помните, что зеленый слой - это анимация в моем проекте.

enter image description here

ВОПРОС: как мне выполнить .reveal стили для достижения вышеуказанного поведения.

  • Первый div - dr aws .green фон (анимация)
  • Второй dv - dr aws .blue фон идет сверху из этого
  • Третий / Четвертый / ... divs - Идет поверх обоих, но показывает любой фон First div dr aws

Примечание: Первый и Второй div охватывает 100% доступной ширины и высоты. 

.green {
    background-color: #159c82;
    width: 100vw;
    height: 100vh;
}

.blue {
    background-color: #1b4287;
    // I could change this to a sibling div and use,
    // position: absolute; but that seems unnecessary
    width: 100%;
    height: 100%;
}

.reveal {
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    height: 50px;
    // not sure what else to put here to make it work
}

<div class="green">
    <div class="blue">
        <div class="reveal"></div>
    </div>
</div>

PS Я обнаружил один подход, который мне совсем не понравился.

enter image description here

Ответы [ 5 ]

10 голосов
/ 02 мая 2020

Используйте маску, чтобы создать отверстие, и нет необходимости в открытии div. Позже вы можете изменить размер и положение, чтобы получить желаемую анимацию: 

.green {
  background: linear-gradient(45deg,#159c82,red);
  height: 100vh;
}

.blue {
  background:#1b4287;
  height: 100%;
  -webkit-mask:
    /* you adjust this */
    linear-gradient(#fff,#fff) 
     50px 50px/ /*left top*/
     200px 20px, /*width height*/
    /**/
    linear-gradient(#fff,#fff); 
  -webkit-mask-repeat:no-repeat;    
  -webkit-mask-composite: destination-out;
  
  mask:
    /* you adjust this */
    linear-gradient(#fff,#fff) 
     50px 50px/ /*left top*/
     200px 20px, /*width height*/
    /**/
    linear-gradient(#fff,#fff);
  mask-repeat:no-repeat;    
  mask-composite:exclude;
  transition:.5s;
}
.blue:hover {
  -webkit-mask-position:100px 100px,0 0;
          mask-position:100px 150px,0 0;
  -webkit-mask-size:300px 50px,auto;
          mask-size:300px 50px,auto;
}

body {
  margin: 0;
}
<div class="green">
  <div class="blue">
  </div>
</div>

Вы также можете добавить столько масок, сколько хотите: 

.green {
  background: url(https://i.picsum.photos/id/1018/800/800.jpg) center/cover;
  height: 100vh;
}

.blue {
  background:#1b4287;
  height: 100%;
  -webkit-mask:
    /* 3rd mask */
    radial-gradient(farthest-side,#fff 99%,transparent) 
     top 50px right 50px/ 
     100px 100px,
    /**/
    /* 2nd mask */
    linear-gradient(#fff,#fff) 
     bottom 50px right 50px/ 
     300px 20px,
    /**/
    /* 1st mask */
    linear-gradient(#fff,#fff) 
     50px 50px/ 
     200px 20px,
    /**/
    linear-gradient(#fff,#fff);
  -webkit-mask-repeat:no-repeat;    
  -webkit-mask-composite: destination-out;
  
  mask:
    /* 3rd mask */
    radial-gradient(farthest-side,#fff 99%,transparent) 
     top 50px right 50px/ 
     100px 100px,
    /**/
    /* 2nd mask */
    linear-gradient(#fff,#fff) 
     bottom 50px right 50px/ 
     300px 20px,
    /**/
    /* 1st mask */
    linear-gradient(#fff,#fff) 
     50px 50px/ 
     200px 20px,
    /**/
    linear-gradient(#fff,#fff);
  mask-repeat:no-repeat;    
  mask-composite:exclude;
  transition:.5s;
}
.blue:hover {
  -webkit-mask-position:
            100px 100px,
            bottom 100px left 50px,
            top 50px right 50px,
            0 0;
          mask-position:
            100px 100px,
            bottom 100px left 50px,
            top 50px right 50px,
            0 0;
  -webkit-mask-size:
            150px 150px,
            50px 50px,
            300px 50px,
            auto;
          mask-size:
            150px 150px,
            50px 50px,
            300px 50px,
            auto;
}

body {
  margin: 0;
}
<div class="green">
  <div class="blue">
  </div>
</div>
0 голосов
/ 10 мая 2020

Техника, которая будет работать, с еще более простым макетом, это box-shadow 

.layer1 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(yellow, blue);
  background-size: 200% 200%;
  animation: bkg 2s infinite alternate;
  background-origin: padding-box;
}

.layer2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: transparent;
  border-radius: 30px;
  left: 20px;
  top: 40px;
  box-shadow: 0px 0px 0px 10000px blue;
}


@keyframes bkg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%
  }
}
<div class="layer1"></div>
<div class="layer2">
</div>

Кроме того, у вас есть возможность добиться этого с помощью смешивания.

Основным недостатком является то, что при этом используется hard-light Сын, цвета, используемые в layer2, ограничены наличием 0 или 255 для основных цветов (красный синий и зеленый).

Это будет работать для чистого красного (255, 0,0), зеленого (0 , 255, 0), синий (0, 0, 255), а также (255, 255, 0), (255, 0, 255), (0, 255, 255)

Но он имеет Преимущество заключается в том, что вы можете установить в качестве разделительных делителей windows 

.layer1 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(yellow, blue);
  background-size: 200% 200%;
  animation: bkg 2s infinite alternate;
  background-origin: padding-box;
}

.layer2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 255, 0);
  mix-blend-mode: hard-light;
}

.layer3 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: grey;
  border-radius: 30px;
  left: 20px;
  top: 40px;
}

@keyframes bkg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%
  }
}
<div class="layer1"></div>
<div class="layer2">
  <div class="layer3"></div>
</div>

Это также будет работать для нескольких делений: 

.layer1 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(yellow, blue);
  background-size: 200% 200%;
  animation: bkg 2s infinite alternate;
  background-origin: padding-box;
}

.layer2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 255, 0);
  mix-blend-mode: hard-light;
}

.layer3 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: grey;
  border-radius: 30px;
  left: 20px;
  top: 40px;
}

.layer3:nth-child(2) {
  left: 120px;
  top: 80px;
}

@keyframes bkg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%
  }
}
<div class="layer1"></div>
<div class="layer2">
  <div class="layer3"></div>
  <div class="layer3"></div>
</div>
0 голосов
/ 08 мая 2020

Если я вас правильно понимаю, вам, вероятно, следует использовать переменную css. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Редактируя ваш пример, мы получаем следующее. 

:root {
  --bottom-layer-color: #159c82
}

.green {
  background-color: var(--bottom-layer-color);
  width: 100vw;
  height: 100vh;
}

.blue {
  background-color: #1b4287;
  width: 100%;
  height: 100%;
}

.reveal {
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  height: 50px;
  background-color: var(--bottom-layer-color)
}

<div class="green">
  <div class="blue">
    <div class="reveal"></div>
  </div>
</div>

ура,

для изменения цвета с помощью css: 

/* Use a later css file to redeclare the root variable,    */
/* this will override previously declared css. */
/* https://css-tricks.com/precedence-css-order-css-matters/ */
:root {
  --bottom-layer-color: powderblue
}

для изменения цвета с помощью javascript: 

const eStyle = document.documentElement.style
eStyle.setProperty('--top-bar-height', '263px');

Вы можете многое изменить с помощью css переменных. Не только цвета фона.

Например, 

root: {
  --bottom-layer-color: #159c82
  --bottom-layer-radius: 50%;
  /* this would make the bottom layer a circle. And reaveal a circle. */
}

.green {
  background-color: var(--bottom-layer-color)
  border-radius: var(--bottom-layer-color)
  width: 100vw;
  height: 100vh;
}

.reveal {
  background-color: var(--bottom-layer-color)
  border-radius: var(--bottom-layer-color)
}

/* Set --bottom-layer-radius back to 0 to make both items square again. */
0 голосов
/ 08 мая 2020

Это одна из самых простых вещей, которую можно сделать в CSS

<Style>
.blue {
width: 100%;
height: 300px;
background-color: lightblue;
}
</style>
<div class="blue">
</div>
0 голосов
/ 02 мая 2020

Хотите ли вы поместить раскрывающий элемент div только в это положение или показать зеленый цвет из нижнего слоя?

только для позиции, в которую вы можете добавить реальную позицию в своем синем элементе Div и абсолютную позицию в вашей позиции. показать div с верхним и левым значениями. 

.green {
    background-color: #159c82;
    width: 100vw;
    height: 100vh;
}

.blue {
    background-color: #1b4287;
    width: 100%;
    height: 100%;

    position: relative;
}

.reveal {
    position: absolute;
    top: 10px;
    left: 10px;

    width: 200px;
    height: 50px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...