вторник, 15 февраля 2022 г.
акция
.slideshow {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
background: #000;
margin: 20px 0;
}
.slideshow-item {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
animation: slideanim 40s infinite;
pointer-events: none;
}
.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img {
animation-delay: 0;
}
.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img {
animation-delay: 10s;
}
.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img {
animation-delay: 20s;
}
.slideshow-item:nth-child(4),
.slideshow-item:nth-child(4) img {
animation-delay: 30s;
}
.slideshow-item img {
width: 100%;
height: 100%;
object-fit: cover;
animation: zoom 40s infinite;
}
.slideshow-item-text {
max-width: 50%;
position: absolute;
bottom: 20px;
left: 20px;
background-color: rgba(0,0,0,0.7);
color: #fff;
padding: 20px 30px;
font-family: Verdana, sans-serif;
}
.slideshow-item-text h5 {
font-size: 22px;
margin: 0 0 10px 0;
color: #BFE2FF;
}
.slideshow-item-text p {
font-size: 15px;
margin-bottom: 10px;
}
@keyframes slideanim {
12.5%{
opacity: 1;
pointer-events: auto;
}
25%{
opacity: 1;
pointer-events: auto;
}
37.5%{
opacity: 0;
}
}
@keyframes zoom {
50%{
transform: scale(1.3);
}
}
@media screen and (max-width: 1100px){
.slideshow-item-text{
max-width: 75%;
}
}
@media screen and (max-width: 456px){
.slideshow-item-text {
bottom: 0;
left: 0;
max-width: 100%;
}
.slideshow-item-text h5 {
font-size: 18px;
}
.slideshow-item-text p {
font-size: 13px;
}
}
вторник, 1 февраля 2022 г.
Подписаться на:
Сообщения (Atom)
