Плывущие дождевые облака на CSS3
|
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 |
/* What do you have to be scared of? * * Lorin Tackett, July 2013 * http://lorintackett.com */ @keyframes clouds-loop-1 { to { background-position: -1000px 0; } } .clouds-1 { background-image: url("/img/clouds_2.png"); animation: clouds-loop-1 30s infinite linear; } @keyframes clouds-loop-2 { to { background-position: -1000px 0; } } .clouds-2 { background-image: url("/img/clouds_1.png"); animation: clouds-loop-2 35s infinite linear; } @keyframes clouds-loop-3 { to { background-position: -1579px 0; } } .clouds-3 { background-image: url("/img/clouds_3.png"); animation: clouds-loop-3 40s infinite linear; } .clouds { opacity: 0.4; pointer-events: none; position: absolute; overflow: hidden; top: 0; left: 0; right: 0; height: 100%; } .clouds-1, .clouds-2, .clouds-3 { background-repeat: repeat-x; position: absolute; top: 0; right: 0; left: 0; height: 500px; } |
|
1 2 3 4 5 |
<div class='clouds'> <div class='clouds-1'></div> <div class='clouds-2'></div> <div class='clouds-3'></div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
