Как да маскирам прозрачно обект, така че да се вижда само фонът?

Цел

Бих искал да създам анимиран многоъгълник, който има части от него подрязани/изрязани/маскирани, така че слоят/елементът/фонът под него да може да се вижда по следния начин:

Анимиран многоъгълник с маска, показваща фон

Създадох анимация с трансформация на CSS3. Това е въртящ се блок, който изглежда сякаш долните му части са подрязани по време на движение. Бих искал подрязаната част да показва какво всъщност е зад/под въртящия се блок (така че неговия фон).

Това, което опитах

Илюзионно решение

За едноцветни фонове можете просто да добавите фигура върху анимацията, така че да създадете илюзията, че е отрязана.

Анимиран многоъгълник с илюзионна маска, показваща едноцветен фон

Това очевидно не работи със снимки:

Анимиран многоъгълник с илюзионна маска не работи на нормален фон

Ограничено решение

Ако трябва да отрежете страните с правоъгълна форма, можете да направите това чрез родителски елемент, но това има очевидни ограничения. Как да направя нещо подобно, но с произволен многоъгълник? Можете ли да маскирате в CSS?

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}

.center {
  width: 200px;
  margin: 0 auto;
  padding-top: 50px;
  height: 100px;
  overflow: hidden;
}

.block {
  height: 100px;
  width: 100px;
  background-color: red;
  z-index: -1;
  transition: transform 1000s 0s linear;
  margin-left: 50px;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotating 2s linear infinite;
}
<div class="center">
  <div class="block rotate"></div>
</div>


html css css-animations css-transforms mask
person totymedli    schedule 22.06.2014    source източник
comment
Изглежда, че webkit трябва да може да реши проблема ви с css свойството -webkit-clip-path. jsfiddle.net/DpfW7/3 Но за съжаление той премахва обекта напълно, когато започне да анимира. все още можете да използвате това без анимацията.   -  person Wezelkrozum    schedule 23.06.2014
comment
background-position също е намек: jsfiddle.net/DpfW7/4, който води много близо до целта , липсва коричната част ...   -  person G-Cyrillus    schedule 23.06.2014

Отговори (3)


arrow_upward
1
arrow_downward

за да задействате z-index, трябва да нулирате позицията на: относителна, фиксирана или абсолютна.

ДЕМО

#mask {
    height: 100px;
    width: 100px;
    background-color: white;
    z-index: 1;
    position:relative;/* to trigger z-index */
}

За да изглежда като последния пример, фоновата позиция може да бъде ефективна. ДЕМО полето е отрязано от фона

основно:

body {
    background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
    background-size:100vw auto;
    background-repeat: no-repeat;
}

#mask {
    height: 100px;
    width: 100px;
    background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
    background-size:100vw auto;
    z-index: 1;
    position:relative;
}

За съжаление, това няма да работи с background-size:cover;, тъй като body и #mask имат различен размер. background-size ще трябва да се настрои чрез javaScript onload и onresize за #mask.

person G-Cyrillus    schedule 22.06.2014
comment
Вероятно сте разбрали погрешно въпроса ми. Нямам проблем с z-index. Бялата кутия трябва да е върху червената. Това е нещото, което подрязва долната част. Проблемът ми е, че бялото поле трябва да е прозрачно, докато все още подрязва долната част на червеното поле. Вижте решение на Wezelkrozums, което работи, но за съжаление само за този конкретен пример. - person totymedli; 23.06.2014
comment
@totymedli ах, добре, мислех, че имаш работа с z-index, който не се задейства правилно. За това, което търсите, обикновено се използва background-position:fixed. Това работи добре, но тук корицата с размер на фона създава проблем, тялото и маската нямат еднакъв размер. компромис може да бъде използването на vw модули. jsfiddle.net/DpfW7/4. В противен случай ще трябва да използвате javascript, за да извлечете височина и ширина, за да адаптирате размера на фона за #mask, така че да следва размера на фона на тялото. ... - person G-Cyrillus; 23.06.2014
comment
И аз се замислих за това решение. Но пада много лесно. Адаптивен дизайн, динамично съдържание, само няколко неща, които биха се объркали много лесно. - person totymedli; 23.06.2014
comment
@totymedli Според мен това, което ти остава е пълен SVG или bg-position + javascript, погледнах clip() css ?. късмет - person G-Cyrillus; 23.06.2014
comment
Да, мислех и за анимиран SVG, но се сблъсквам със същата ситуация там. Не знам дали имам по-добри възможности там. Все пак вашето решение е това, което в момента е най-близо до това, което искам. - person totymedli; 23.06.2014

arrow_upward
0
arrow_downward

Опитахте ли да направите бялата кутия невидима с по-голям z-индекс от червената кутия?

person DareDev1l    schedule 22.06.2014
comment
По този начин подрязването изчезва. Тогава какъв е смисълът от маскирането? - person totymedli; 23.06.2014
comment
и моята първа мисъл, но след това отново прочетох въпроса... :) - person sinisake; 23.06.2014

arrow_upward
0
arrow_downward

Ето го: http://jsfiddle.net/QxG74/2/ Сладка версия за комплекти: http://jsfiddle.net/DpfW7/1/

Дайте на централния div височина от 100 пиксела и задайте преливането на скрито. По този начин въртящият се квадрат се подрязва отдолу.

#center {
   width: 200px;
   height: 100px;
   overflow: hidden;
}
person Wezelkrozum    schedule 22.06.2014
comment
Благодаря, това е решение за конкретния пример. Вероятно първоначалният пример не беше най-добрата демонстрация. Вижте моята редакция: трябва да работи дори ако белият блок е вътре във въртящия се триъгълник или ако е кръг. - person totymedli; 23.06.2014