@media screen and (min-width: 1200px) { #profiles_show .profile-head::after { animation-name: v-1-start-profile-head; /*animation-name > можно указать где будут отображаться фоны*/ animation-fill-mode: forwards; animation-iteration-count: infinite; animation-timing-function: steps(1, end); animation-duration: 200s; /*20сек*/ /*filter: brightness(92%) contrast(105%) grayscale(5%);*/ /*Фильтр*/ } } @keyframes v-1-start-profile-head { 0% { /*Основной фон > ("0")*/ background-image: url("https://w.wallhaven.cc/full/vg/wallhaven-vg2vdm.jpg"); background-position: center top; /*Позиция. фон ("1")*/ /*Фильтр ("1")*/ } 10% { /*фон > ("1")*/ background-image: url("https://w.wallhaven.cc/full/96/wallhaven-96187k.jpg"); background-position: center 50%; /*Позиция. фон ("2")*/ /*Фильтр ("2")*/ } 20% { /*фон > ("2")*/ background-image: url("https://w.wallhaven.cc/full/lm/wallhaven-lm92l2.jpg"); background-position: center top; /*Позиция. фон ("3")*/ /*Фильтр ("3")*/ } 30% { /*фон > ("3")*/ background-image: url("https://w.wallhaven.cc/full/76/wallhaven-76ek93.jpg"); background-position: center center; } 40% { /*фон > ("4")*/ background-image: url("https://w.wallhaven.cc/full/43/wallhaven-43xp26.png"); background-position: center top; } 50% { /*фон > ("5")*/ background-image: url("https://w.wallhaven.cc/full/x8/wallhaven-x8773o.jpg"); background-position: center top; } 60% { /*фон > ("6")*/ background-image: url("https://w.wallhaven.cc/full/nz/wallhaven-nzv12v.png"); background-position: center top; } 70% { /*фон > ("7")*/ background-image: url("https://w.wallhaven.cc/full/28/wallhaven-28k5z9.jpg"); background-position: center top; } 80% { /*фон > ("8")*/ background-image: url("https://w.wallhaven.cc/full/gj/wallhaven-gj78xl.jpg"); background-position: center top; } 90% { /*фон > ("9")*/ background-image: url("https://w.wallhaven.cc/full/md/wallhaven-mdzv7m.jpg"); background-position: center top; } }
@media screen and (min-width: 1200px) { body#profiles_show::after { animation-name: body-1; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-timing-function: steps(1, end); animation-duration: 200s; /*20сек*/ /*filter: brightness(92%) contrast(105%) grayscale(5%);*/ /*Фильтр*/ } } @keyframes body-1 { 0% { /*Основной фон > ("0")*/ background-image: url("https://w.wallhaven.cc/full/rd/wallhaven-rddgwm.jpg"); background-position: center top; /*Позиция. фон ("1")*/ /*Фильтр ("1")*/ } 10% { /*фон > ("1")*/ background-image: url("https://w.wallhaven.cc/full/96/wallhaven-96187k.jpg"); background-position: center 50%; /*Позиция. фон ("2")*/ /*Фильтр ("2")*/ } 20% { /*фон > ("2")*/ background-image: url("https://w.wallhaven.cc/full/lm/wallhaven-lm92l2.jpg"); background-position: center top; /*Позиция. фон ("3")*/ /*Фильтр ("3")*/ } 30% { /*фон > ("3")*/ background-image: url("https://w.wallhaven.cc/full/76/wallhaven-76ek93.jpg"); background-position: center center; } 40% { /*фон > ("4")*/ background-image: url("https://w.wallhaven.cc/full/43/wallhaven-43xp26.png"); background-position: center top; } 50% { /*фон > ("5")*/ background-image: url("https://w.wallhaven.cc/full/x8/wallhaven-x8773o.jpg"); background-position: center top; } 60% { /*фон > ("6")*/ background-image: url("https://w.wallhaven.cc/full/nz/wallhaven-nzv12v.png"); background-position: center top; } 70% { /*фон > ("7")*/ background-image: url("https://w.wallhaven.cc/full/28/wallhaven-28k5z9.jpg"); background-position: center top; } 80% { /*фон > ("8")*/ background-image: url("https://w.wallhaven.cc/full/gj/wallhaven-gj78xl.jpg"); background-position: center top; } 90% { /*фон > ("9")*/ background-image: url("https://w.wallhaven.cc/full/md/wallhaven-mdzv7m.jpg"); background-position: center top; } }
нижняя часть [#profiles_show]
@aChery