Створіть ефект відображення лише для CSS з прозорими межами
A Ефект розкриття тільки CSS-зображення можуть бути вирішені по-різному. Це насправді досить легко кодувати дизайн, в якому зображення виділяється з (переповнений) його суцільне тло -ви просто розмістити зображення над меншим елементом з твердим фоном.
Ви можете отримати той самий результат, якщо ви використовуєте прозорі кордони, де ви зберігаєте розмір елемента фону однаковий як і на передньому плані і додати прозорі межі для того, щоб створити порожній простір для перетікання переднього плану.
Існує деякі переваги у використанні останнього методу. Оскільки це прозорі кордони, які забезпечують область для переповнення переднього плану, ми можемо керувати напрямком переповнення між лівою, правою, верхньою і нижньою межами. Також, маючи однаковий розмір як для переднього плану, так і для фону полегшує переміщення обох елементів одночасно на сторінці.
Коротко кажучи, ми побачимо, як це зробити створити ефект відображення лише для CSS за допомогою a менший суцільний фон з зображення переднього плану, яке має прозорі межі. Ви можете перевірити остаточне демо нижче.
1. Створіть початковий код
HTML-мудрий, тільки один У CSS ми використовуємо дві змінні CSS, Ми також додаємо Ми додайте порожній The Додаємо зображення до The На скріншот нижче ви можете побачити, що ми маємо досі ( Щоб додати менше зображення (висувається) за зображенням, ми будемо використовувати інший псевдоелемент, Ми створюємо іншу змінну CSS, The ширина розраховується як The висота розраховується як З CSS-фільтр Ось це скріншот демо надано досі (с Ми додайте Як ми вже додано Нижче ви можете побачити остаточне демо. Якщо відображається
--bgc і --dim для колір фону і розміри з .foo контейнера відповідно. У прикладі я використав однакове значення для ширини і висоти, щоб отримати квадратний ящик, створюйте окремі змінні для висоти і ширини, якщо потрібно прямокутник.позиція: відносна правило до .foo, так що його псевдоелементи, які ми будемо використовувати для розкриття зображення, може бути абсолютно позиціонується (див. нижче), і таким чином складені один на одного. .foo --bgc: # FFCC03; --dim: 300px; width: var (- dim); height: var (- dim); background-color: var (- bgc); позиція: відносна;
зміст власності до обох псевдоелементів, .foo :: до і .foo :: after, щоб отримати їх належним чином. .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0;
.foo Елемент, його два псевдоелемента, .foo :: до, .foo :: after, і їх : hover псевдокласи отримати перехід власності що буде додайте простоту переходу їм 500 мілісекунд (півсекунди). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after перемикання: перетворення 500ms;
2. Додайте зображення
.foo :: до псевдоелемент як фонове зображення, і розмір його покриває весь псевдоелемент з ширина і висота властивості. Ми складіть його прямо під .foo елемент за допомогою z-індекс: -1 правило. .foo :: before ширина: 100%; висота: 100%; фон: url (camel.png) центр / обкладинка; z-індекс: -1;
центр ключове слово центрі зображення, в той час як покриття ключове слово масштабує зображення охоплюють весь елемент при збереженні співвідношення сторін. z-індекс видалено з .foo :: до так що це можна побачити):
3. Додайте висувний фон
.foo :: after.--b, для ширина кордону. Ми даємо три прозорі межі до :: після псевдоелемент: зверху, праворуч і знизу. .foo :: after --b: 20px; width: calc (100% - var (- b)); висота: calc (100% - calc (var (- b) * 2)); border: var (- b) твердий прозорий; кордон зліва: немає; box-shadow: вставка 0 var (- dim) 0 var (- bgc); фільтр: яскравість (.8); z-індекс: -2;
calc (100% - var - b)) що повертається загальна ширина .foo мінус загальна ширина її горизонтальних меж (лише правий кордон, оскільки кордон не залишився).calc (100% - calc (var (- b) * 2)) що повертається загальна висота .foo мінус загальна ширина його вертикальних кордонів (верхня і нижня межі).box-shadow власності, ми також додайте горизонтальну вставку тіні розміру такий же, як .foo (який var (- dim)).яскравість (.8) темніє колір фону трохи, і, нарешті, z-індекс: -2 правило розміщує :: після псевдоелемент під ним :: раніше містить зображення.z-індекс видалені з обох псевдоелементів, щоб їх можна було побачити):
4. Додайте перетворення
перетворення власності до двох псевдоелементів, тому коли користувач зависає .foo, є обидва псевдоелемента переміщуються горизонтально.перехід властивість всіх елементів наприкінці кроку 1, рух зображення і його фон є обидва анімовані. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Бонус: необов'язкова маржа
.foo поруч з іншими елементами на сторінці і бажаєте, щоб ці інші елементи відсунься тоді, коли зображення і його фон виходять, то додайте праву крапку такої ж ширини, що і .foo до .foo: hover елемент. .foo: hover margin-right: var (- dim);
