Пример:
Фильтры:
Выбрать другой фон для примера:
HTML:
|
1 2 3 4 5 6 7 |
<div class="old-film"> <div class="film"> <div class="effect"> <div class="grain"></div> </div> </div> </div> |
При использовании фильтра "сепия" добавляем к контейнеру old-film класс sepia, а для инвертирования - invert, например:
<div class="old-film sepia invert"> ... </div>
Если использовать эффект старого фильма к нескольким блокам или секциям, то фоновый рисунок удобнее задавать в html, например:
<div style="background-image: url(/blog/img/blank.webp);" class="old-film"> ... </div>
<div style="background-image: url(/blog/img/blank.webp);" class="old-film"> ... </div>
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
.old-film *, .old-film *:before, .old-film *:after { position: absolute; } .old-film { --filmbg: #fff; height: 500px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--filmbg); background-image: url(background.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all 0.5s ease 0s; margin: 20px 0; border-radius: 30px; } .old-film:after { content: ""; width: 100%; height: 100%; box-shadow: 0 0 180px 0 var(--filmbg) inset, 0 0 40px 5px var(--filmbg) inset, 0 0 10px 10px var(--filmbg); position: absolute; } .film, .effect { width: 100%; height: 100%; filter: blur(0.45px) drop-shadow(0 0 0 #fff1); } .film:after, .effect:after { content: ''; width: 120%; height: 100%; top: 0; left: 0; padding-left: 100px; opacity: 0.5; animation: film-scratch 0.45s steps(1) infinite; background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37%); } .effect:after { left: 30%; animation: effect-scratch 2s infinite; } .grain { width: 100%; height: 100%; } .grain:after { content: ''; width: 110%; height: 110%; top: -5%; left: -5%; opacity: .25; background-image: repeating-conic-gradient(var(--filmbg) 0%, transparent .00003%, transparent .0005%, transparent .00095%), repeating-conic-gradient(var(--filmbg) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%); animation: grain 0.5s steps(1) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-1%, -1%); } 20% { transform: translate(1%, 1%); } 30% { transform: translate(-2%, -2%); } 40% { transform: translate(3%, 3%); } 50% { transform: translate(-3%, -3%); } 60% { transform: translate(4%, 4%); } 70% { transform: translate(-4%, -4%); } 80% { transform: translate(2%, 2%); } 90% { transform: translate(-3%, -3%); } } @keyframes film-scratch { 0%, 100% { transform: translateX(0); opacity: 0.5; } 10% { transform: translateX(-1%); } 20% { transform: translateX(1%); } 30% { transform: translateX(-2%); opacity: 0.75; } 40% { transform: translateX(3%); } 50% { transform: translateX(-3%); opacity: 0.5; } 60% { transform: translateX(8%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(10%); opacity: 0.25; } 90% { transform: translateX(-2%); } } @keyframes effect-scratch { 0% { transform: translateX(0); opacity: 0.75; } 10% { transform: translateX(-1%); } 20% { transform: translateX(1%); } 30% { transform: translateX(-2%); } 40% { transform: translateX(3%); } 50% { transform: translateX(-3%); opacity: 0.5; } 60% { transform: translateX(8%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(10%); opacity: 0.25; } 90% { transform: translateX(20%); } 100% { transform: translateX(30%); } } .old-film.sepia { filter: sepia(0.75); } .old-film.invert .film { filter: invert(1) } |
За основу взято решение, найденное на codepen.io у пользователя Josetxu
Добавить комментарий: