| Kosten | Вторник, 10 Декабря 2019, 02:10 | Сообщение 1 |
| Это быстрый и не сложный урок о том, как настроить красивый переход изображения в другую картинку, где только задействуем CSS для выполнения задачи. Это очень приятная эстетика, где настройка занимает всего несколько минут. Ведь иногда нам нужно сделать функцию по смене изображение, когда мы наводим клик.
И если все сделать стандартно, то не так красиво все выглядит. Здесь мы изначально задаем скорость, где все будет переходить плавно, а точнее вы наводите на одну картинку, и она просто растворяется и появляется совершенно другая.
Классический переходный переход, как известно, что это давний фаворит в мире кино, видео и фотографии. И теперь это может быть что-то, что легко добавляется через CSS на любой веб-сайт или приложение. Во-первых, вам нужно как минимум два изображения для плавного перехода между ними, а остальное — просто простое кодирование.
HTML
Код <div id="apereka-gesunod"> <img class="bottom" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/asulopad.png" /> <img class="pekodam" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/dasulopad.png" /> </div>
CSS
Код #apereka-gesunod {
position:relative;
height:175px;
width:215px;
}
#apereka-gesunod img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
#apereka-gesunod img.pekodam:hover {
opacity:0;
cursor: pointer;
}
Как вы можете видеть, то сначала два изображения были идентифицированы под div id / div, а затем селектор #apereka-gesunod используется, чтобы выдержать правильный макет. Затем второй селектор изображения #apereka-gesunod устанавливает непрозрачность на 100%, а также учитывает совместимость браузера и поддержку переходов.
Последний необходимый фрагмент кода - #apereka-gesunod img. pekodam: объявление при наведении, устанавливающее непрозрачности на 0% при наведении. Где происходит, что прекрасное изображение постепенно затухает, как только наведете на его клик. Вы также можете найти интерес в этом руководстве по основам CSS по правильному использованию селекторов.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Четверг, 12 Декабря 2019, 16:19 | Сообщение 2 |
|
| Это плавный переход по графике на изображение:
Код <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { position: relative; width: 240px; height: 240px; } .box img { border-radius: 50%; vertical-align: top; } .box:after { content: ' '; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%); background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); } </style> </head> <body> <div class="box"><img src="http://zornet.ru/_fr/83/9865573.jpg" alt=""></div> </body> </html> | | Страна: (RU) |
| |
