| Kosten | Суббота, 01 Августа 2020, 05:10 | Сообщение 1 |
| Оригинальный эффекты по смене картинок, который предназначен для смены изображений на чистом CSS, где представлено несколько вариантов на анимационный трюк по смене картинок, что немного по своим функциям схожий на слайдер. Но здесь все гораздо проще и намного легче в установочном процессе, так как нам нужно выставить всего 2 картинки, что будут по заданному времени менять друг друга.
Где такой трюк можно поставить под разные направление, как простая реклама на свой материал или заказанная реклама под клик, для того, чтоб перейти на заданный адрес. Что главное, то вашему вниманию представлено несколько вариантов, где вы сами сможете подобрать ту вариацию, что больше вам подходит по своей анимации, где также будет дополнять эффектной на сайте.
1. Вариант: Падение картинки сверху
HTML
Код <div class="padeniya_pictures"> <div class="drawing-0"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" /> </div> <div class="drawing-1"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" /> </div> <div class="drawing-2"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" /> </div> </div>
CSS
Код .padeniya_pictures {
max-width: 380px;
width: 100%;
margin: 20px auto;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.padeniya_pictures img {
width: 100%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.padeniya_pictures .drawing-0 {
position: relative;
z-index: -2;
}
.padeniya_pictures .drawing-1 {
position: absolute;
top: -100%;
animation: fromtop 10s linear 5s infinite;
}
.padeniya_pictures .drawing-2 {
position: absolute;
top: -100%;
animation: fromtop 10s linear infinite;
}
@keyframes fromtop {
0% {
top: -100%;
}
4% {
top: 0;
}
5% {
top: -20px;
}
6% {
top: 0;
}
49.99999% {
top: 0;
z-index: 1;
}
50% {
top: 0;
z-index: -1;
}
100% {
z-index: -1;
top: 0;
}
}
На этом установка завершена.
Демонстрация
Второй эффект: Поворот картинки с прозрачностью
HTML
Код <div class="povusavaya-kartinku"> <div class="snimok-1"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" /> </div> <div class="snimok-2"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" /> </div> </div>
CSS
Код .povusavaya-kartinku {
max-width: 380px;
width: 100%;
margin: 20px auto;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.povusavaya-kartinku img {
width: 100%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.povusavaya-kartinku .snimok-1 {
position: relative;
animation: rotate 10s linear 5s infinite;
}
.povusavaya-kartinku .snimok-2 {
position: absolute;
top: 0;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% {
opacity: 1;
transform: rotate(0) scale(1);
}
40% {
transform: rotate(0) scale(1);
opacity: 1;
}
49.99999% {
transform: rotate(45deg) scale(3);
opacity: 0;
z-index: 1;
}
50% {
transform: rotate(0) scale(1);
opacity: 0;
z-index: -1;
}
100% {
opacity: 1;
transform: rotate(0) scale(1);
z-index: -1;
}
}
Установочный процесс завершен.
Демонстрация
Третий вариант: Увеличение изображение при смене
HTML
Код <div class="uvelicena-uzobravena"> <div class="pesoned-1"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" /> </div> <div class="pesoned-2"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" /> </div> </div>
CSS
Код .uvelicena-uzobravena {
max-width: 380px;
width: 100%;
margin: 20px auto;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.uvelicena-uzobravena img {
width: 100%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
}
.uvelicena-uzobravena .pesoned-1 {
position: relative;
animation: scale 10s linear 5s infinite;
}
.uvelicena-uzobravena .pesoned-2 {
position: absolute;
top: 0;
animation: scale 10s linear infinite;
}
@keyframes scale {
0% {
transform: scale(0);
}
20% {
transform: scale(1);
}
49.99999% {
transform: scale(1);
z-index: 1;
}
50% {
transform: scale(1);
z-index: -1;
}
100% {
transform: scale(1);
z-index: -1;
}
}
Установочный процесс завершен.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Суббота, 01 Августа 2020, 05:31 | Сообщение 2 |
|
| Красивая исполненная анимация изображений на чистом CSS
Эффект смены картинок при горизонтальное вращение
Для вертикального нужно заменить rotateY на rotateX
HTML
Код <div class="krasivaya-animatsiya"> <div class="dsagan-1"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" /> </div> <div class="dsagan-2"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" /> </div> </div>
CSS
Код .krasivaya-animatsiya {
max-width: 380px;
width: 100%;
margin: 20px auto;
position: relative;
}
.krasivaya-animatsiya img {
width: 100%;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.krasivaya-animatsiya .dsagan-1 {
position: relative;
animation: rotateY1 10s linear infinite;
backface-visibility: hidden;
}
.krasivaya-animatsiya .dsagan-2 {
position: absolute;
top: 0;
animation: rotateY2 10s linear infinite;
backface-visibility: hidden;
}
@keyframes rotateY1 {
0% {
transform: rotateY(-180deg);
}
40% {
transform: rotateY(-180deg);
}
50% {
transform: rotateY(0);
}
90% {
transform: rotateY(0);
}
100% {
transform: rotateY(180deg);
}
}
@keyframes rotateY2 {
0% {
transform: rotateY(0);
}
40% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg);
}
90% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
На этом вся установка.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Суббота, 01 Августа 2020, 05:49 | Сообщение 3 |
|
| Вообщем все по стандарту, где только смена фотографий происходит через заданный фильтр, что переменятся с добавлением прозрачности. Именно в этом задействован фильтр brightness, но как понимаете, что здесь можно совершенно другой закрепить для красивого эффекта появление картинки.
Здесь применен фильтр с прозрачностью
Сам фильтр так работает, что идет вспышка, с последующей яркости, где автоматически происходит замена картинки, и так по кругу, как на всех представленных вариантах.
HTML
Код <div class="elamenuga-vusukas"> <div class="sepunkas-1"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-1.jpg" /> </div> <div class="sepunkas-2"> <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/desanuv/desamilas-2.jpg" /> </div> </div>
CSS
Код .elamenuga-vusukas {
max-width: 380px;
width: 100%;
margin: 20px auto;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.elamenuga-vusukas img {
width: 100%;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.elamenuga-vusukas .sepunkas-1 {
position: relative;
animation: brightness 10s linear 5s infinite;
}
.elamenuga-vusukas .sepunkas-2 {
position: absolute;
top: 0;
animation: brightness 10s linear infinite;
}
@keyframes brightness {
0% {
opacity: 1;
}
54% {
filter: none;
}
58% {
opacity: 1;
}
59.99999% {
filter: brightness(10);
z-index: 1;
}
60% {
opacity: 0;
z-index: -1;
}
}
На этом все, что по эффекту, то в сети или на сайте вы можете найти фильтры, виде стилей под замену изображений.
Демонстрация
| | Страна: (RU) |
| |
