Падающие осенние листья на фоне с Parallax эффектом на чистом CSS
Неплохое решение для создания на сайте атмосферы падающих листьев
Для начала посмотрите ДЕМО
Установка:
В самый низ вашего 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 |
body { background-color: #C7E2C0; background-image: url('/img/L1.png'), url('/img/L2.png'), url('/img/L3.png'); left: 0; position: relative; top: 0; z-index:1; -webkit-animation: leaf 10s linear infinite; -moz-animation: leaf 10s linear infinite; -ms-animation: leaf 10s linear infinite; animation: leaf 10s linear infinite; } @keyframes leaf { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, -300px 600px;} } @-moz-keyframes leaf { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, -300px 600px;} } @-webkit-keyframes leaf { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, -300px 600px;} } #test { -webkit-filter: blur(5px); font-family: 'Segoe UI'; font-size: 30px; color: white; background-color: rgba(130,255,99,0.8); z-index:2; } #test_two { -webkit-filter: blur(1px); font-family: 'Arial Black'; font-size: 30px; color: white; background-color: rgba(130,255,99,0.8); margin-top:-10px; z-index:1; } |
Осталось лишь залить картинки из прикреплённого архива в папку img
