Фантастични анимации, включващи задържане на курсора на мишката върху изображения, използвани за изискване на JavaScript. Няма повече! CSS е тук, за да оживи вашите миниатюри и галерии.
Ефектите при задържане на изображението могат да добавят допълнително ниво на блясък към вашия уебсайт. Те създават плавен ефект, правейки галериите с изображения или въртележките по-приятни за навигация. Най-добрата част е, че можете да създавате тези ефекти само с CSS и без JavaScript.
Можете да създавате различни стилове на анимация върху вашите изображения. Те включват замъгляване или мащабиране на фона, избледняване или плъзгане в текста и промяна на цвета на фона.
Създаване на HTML за изображенията
Започнете със създаване на index.html файл в празна папка на вашия компютър, след което отворете файла с текстов редактор. Вътре във файла създайте HTML скелета и добавете следното маркиране в началния и затварящия основни тагове:
<дивклас="решетка">
<дивклас="обвивка на изображение">
<imgклас="размазване"src=" https://picsum.photos/500?random=1"алт=""><дивклас="избледняване на съдържанието">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Солута реклама
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див><дивклас="обвивка на изображение">
<imgклас="размазване на мащаба"src=" https://picsum.photos/500?random=2"алт=""><дивклас="избледняване на съдържанието">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Солута реклама
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див><дивклас="обвивка на изображение">
<imgклас="размазване"src=" https://picsum.photos/500?random=3"алт=""><дивклас="съдържание слайд-наляво">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Солута реклама
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див><дивклас="обвивка на изображение">
<imgклас="сив"src=" https://picsum.photos/500?random=3"алт="">
<дивклас="съдържание слайд-наляво">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Солута реклама
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див>
див>
Това е мрежов контейнер с четири обвивки на изображения. Елементите div с изображение-обвивка служи като обвивка на изображението и съответния текст. Изображението и съдържанието на всеки раздел имат добавен уникален набор от класове.
Вътре в листа със стилове ще насочете тези елементи по техните имена на класове и прилагане на различните стилови и анимационни ефекти. Текстът няма да се показва по подразбиране; ще го покажете само когато задържите курсора на мишката над обвивката на изображението и изображението ще претърпи различни ефекти в процеса.
Добавяне на базов CSS
Сега, след като сте създали HTML, е време да го стилизирате с CSS. Създавам style.css файл и връзка към този стилов лист от вашия HTML файл, вътре в раздел:
<връзкаотн="стилов лист"href="style.css">Вътре във вашия style.css файл, първото нещо, което трябва да направите, е да нулирате полето на тялото на нула и да зададете някакво долно поле:
тяло {
марж: 0;
margin-bottom: 20рем;
}След това трябва да превърнете най-външния контейнер в a CSS мрежа, която можете да използвате, за да оформите елементи в две измерения. Следният код създава мрежа с толкова колони или редове, колкото се побират. Минималният размер на всяка колона е 300px, а максималният размер е 1 част от контейнера:
.мрежа {
дисплей: решетка;
grid-template-colons: повторете(автоматично напасване, minmax(300px, 1фр));
}Тъй като искате да позиционирате текста спрямо неговия контейнер, трябва да зададете позицията спрямо обвивката на изображението:
.обвивка на изображение {
позиция: роднина;
препълване: скрит;
}
Следващата стъпка е стилизирането на изображението. Покажете изображението като блоков елемент, направете го да обхваща ширината на целия контейнер и го поставете монтирано в центъра на неговия контейнер:
.обвивка на изображение > img {
дисплей: блок;
ширина: 100%;
съотношение: 1 / 1;
обектно прилягане: Покрийте;
обект-позиция: център;
}
Що се отнася до текста, позиционирайте го централно и дайте прозрачен, светлосив цвят на фона:
.обвивка на изображение > .съдържание {
позиция: абсолютен;
вмъкване: 0;
размер на шрифта: 2рем;
подплата: 1рем;
заден план: rgba(255, 255, 255, .4);
дисплей: flex;
подравняване на елементи: център;
justify-content: център;
}
Запазете CSS файла и го отворете index.html във вашия браузър. Трябва да намерите страница, подобна на тази на изображението по-долу.
Настройка на прехода върху изображения и текстове
Сега, след като сте приложили основните стилове към изображенията, следващата стъпка е да добавите малко анимация към тях. Започнете, като добавите преход към двете изображения и съответния им текст:
.обвивка на изображение > img,
.обвивка на изображение > .съдържание {
преход: 200Госпожицалекота на влизане и излизане;
}
Това означава, че всички ефекти на преход (т.е. избледняване, мащабиране и замъгляване) ще продължат 200 милисекунди и ще имат една и съща времева крива.
Избледняване и замъгляване на анимация
Първият стил на анимация избледнява в текста. Когато задържите курсора на мишката върху конкретна обвивка на изображение, съдържанието, което има избледняват клас ще има този ефект (анимация с постепенно затихване и затихване), приложен към него. Постигате това, като зададете непрозрачността на нула и я промените на единица, когато мишката задържи върху обвивка на конкретно изображение:
.обвивка на изображение > .съдържание.избледнявам {
непрозрачност: 0;
}
.обвивка на изображение:задръжте > .съдържание.избледнявам {
непрозрачност: 1;
}
Ако запишете файла и проверите браузъра си, ще видите ефекта на затихващата анимация. Но може също така да забележите, че текстът е малко труден за четене (ако изображението е рязко и има много контраст). Спомнете си, че всички изображения също имат име на клас размазване. Това е за замъгляване на изображенията, за да добавите така необходимия контраст между тях и текста:
изображение-обвивка:задръжте > img.размазване {
филтър: размазване(5px)
}
Сега, когато задържите курсора на мишката върху изображението, можете да видите, че то просто ще се замъгли. Можете да увеличите стойността на пикселите, за да направите замъгляването по-ясно изразено върху изображенията, като по този начин добавите повече контраст между него и текста.
Добавяне на други ефекти
Другите ефекти са плъзгане на текста отляво, мащабиране на изображението и добавяне на сива скала към изображението. Ето кода за постигане и на трите ефекта:
.обвивка на изображение > .съдържание.слайд-наляво {
трансформирам: translateX(100%)
}.обвивка на изображение:задръжте > .съдържание.слайд-наляво {
трансформирам: translateX(0%)
}.обвивка на изображение:задръжте > img.сив {
филтър: скала на сивото(1)
}.обвивка на изображение:задръжте > img.размазване {
филтър: размазване(5px)
}
.обвивка на изображение:задръжте > img.увеличаване {
трансформирам: мащаб(1.1)
}
Запазете файла, след това отидете в браузъра си и задръжте курсора на мишката върху всяко изображение. Трябва да видите различните ефекти в действие.
За да завършите плъзгащите се ефекти, можете да създадете още три обвивки на изображения, всяка от които съдържа изображение и текст. Всяка част от текста ще има име на клас пързалям се на горе, плъзнете надолу, или леко-надясно. След това ще подадете правилната стойност пиксел, em или rem, вътре в трансформиране () функция за създаване и на трите ефекта.
CSS Grid и Flexbox
CSS Grid и Flexbox са две функции, които ви позволяват да създавате фантастични оформления за вашия уебсайт. Можете да създадете практически всяко оформление, което желаете, с лекота и да персонализирате редовете и колоните по ваш вкус. Колоните също ще бъдат отзивчиви по подразбиране. Научаването кога да използвате едно пред друго ще ви помогне да станете най-добрият един процент CSS разработчик.
