Създайте CSS-Only Image Reveal Ефект с прозрачни граници
А CSS-единствено изображение разкрива ефект може да бъде решен по различни начини. Това всъщност е много лесно да се кодира дизайн, в който изображението се откроява от (е препълнен от) нейния солиден фон -ти просто поставете изображение върху по-малък елемент със солиден фон.
Можете да получите същия резултат, ако използвате прозрачни граници, където държите размерът на елемента на фона е същият като на преден план и да добавите прозрачни граници, за да създайте празно пространство за да нахлуе на преден план.
Има някои предимства при използването на последния метод. Тъй като това са прозрачните граници, които осигуряват площта, в която предният план може да се препълни, можем контролирайте посоката на преливане между лявата, дясната, горната и долната граница. Също така, имат същия размер както за преден план, така и за фон улеснява едновременното преместване на двата елемента на страницата.
Накратко, ще видим как да го направим създайте CSS-ефект само за разкриване на изображение с помощта на по-малък солиден фон с изображение от преден план, което има прозрачни граници. Можете да проверите окончателно демо По-долу.
1. Създайте първоначалния код
HTML-мъдър, само един В CSS използваме две CSS променливи, Ние също добавяме ние добавете празно Най- Добавяме изображението към Най- На екранна снимка по-долу можете да видите какво имаме досега ( За да добавите по-малък (плъзгащ се) фон зад изображението, ще използваме другия псевдоелемент, Създаваме друга CSS променлива, Най- широчина се изчислява като Най- височина се изчислява като С CSS филтър на Ето снимка на демото досега (с ние добавете Тъй като ние вече добави По-долу можете да видите окончателно демо. Ако покажете
--BGC и --блед за цвят на фона и размери от .Foo съответно. В примера използвах същата стойност за ширина и височина, за да получите квадратна кутия, създайте отделни променливи за височината и ширината, ако искате правоъгълник.позиция: относителна правило .Foo, така че неговите псевдо-елементи, за които ще използваме разкриване на образа, може да бъде абсолютно позициониран (виж по-долу) и по този начин натрупани един върху друг. .foo --bgc: # FFCC03; --dim: 300px; width: var (- dim); височина: var (- dim); фон-цвят: var (- bgc); позиция: относителна;
съдържание Имот към двата псевдоелемента, .Foo :: преди и .Foo :: след, за да ги направят правилно. .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0;
.Foo елемент, неговите два псевдоелемента, .Foo :: преди, .Foo :: след, и техния : навъртам псевдо-класовете получите преход Имот че ще добавете лесен преход към тях за 500 милисекунди (половин секунда). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: преобразувайте 500ms;
2. Добавете изображението
.Foo :: преди псевдо-елемент като фоново изображение, и размер, за да покрие целия псевдоелемент с широчина и височина Имоти. ние подредете го точно под .Foo елемент използвайки z-индекс: -1 правило. .foo :: before ширина: 100%; височина: 100%; фон: url (camel.png) център / капак; z-индекс: -1;
център ключова дума центрира изображението, докато Покрийте Ключовата дума мащабира изображението покриване на целия елемент при запазване на пропорцията. Z-индекс се премахва от .Foo :: преди така че да може да се види):
3. Добавете фона на слайда
.Foo :: след.--б, за ширина на границата. Ние даваме три прозрачни граници към ::след псевдо-елемент: отгоре, отдясно и отдолу. .foo :: after --b: 20px; width: calc (100% - var (- b)); височина: изчислена (100% - изчислена (var (- b) * 2)); border: var (- b) прозрачен; граница ляво: няма; box-shadow: вмъкване 0 var (- dim) 0 var (- bgc); филтър: яркост (.8); z-индекс: -2;
изчисление (100% - var - b)) това се връща общата ширина на. \ t .Foo минус общата ширина на нейните хоризонтални граници (само дясната граница, тъй като няма лява граница).изчисление (100% - изчисление (var (- b) * 2)) това се връща общата височина на. \ t .Foo минус общата ширина на нейните вертикални граници (горни и долни граници).кутия сянка собственост, ние също добавете хоризонтална вмъкната сянка от размера същият като .Foo (кое е Var (- слабо)).яркост (0,8) Затъмнява цвета на фона малко, и накрая, z-индекс: -2 правило места ::след псевдоелемент отдолу ::преди който съдържа изображението.Z-индекс премахнати от двата псевдоелемента, така че те да могат да се видят):
4. Добавете трансформацията
трансформиране Имот към двата псевдоелемента, така че когато потребителят се издига .Foo, двата псевдоелемента са хоризонтално.преход собственост на всички елементи в края на Стъпка 1, движението на изображението и неговия фон са и двете са анимирани. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Бонус: Незадължителен марж
.Foo до други елементи на страница и искат тези други елементи да премести се след това изображението и неговият фон излизат добавете дясно поле от същата ширина като тази на .Foo към .Foo: навъртам елемент. .foo: hover margin-right: var (- dim);
