Анимированный пейзаж с видом на холмы, ветряные генераторы и закат на CSS3
Замечательный анимированный пейзаж, на котором плавно вращаются лопасти ветрогенераторов, плывут облака и улетают в даль птицы. Даже не верится, что всё это выполнено на чистом CSS
Для начала посмотрите ДЕМО
Установка:
1#: На страницах, где хотите видеть такой пейзаж, перед закрывающим тегом </head> вставьте:
|
1 |
<link rel="stylesheet" type="text/css" href="/css/landscape_f.css"> |
2#: На этих же страницах сразу после открывающего тега body вставьте:
|
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 |
<div class="container"> <div class="sky"></div> <div class="sun"></div> <div class="clouds"> <div class="cloud-group left"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> <div class="cloud-group right"> <div class="top"></div> <div class="bottom"></div> </div> <div class="birds"> <div class="bird bird-1"> <div class="wing left"></div> <div class="body"></div> <div class="wing right"></div> </div> <div class="bird bird-2"> <div class="wing left"></div> <div class="body"></div> <div class="wing right"></div> </div> <div class="bird bird-3"> <div class="wing left"></div> <div class="body"></div> <div class="wing right"></div> </div> </div> </div> <div class="earth"></div> <div class="trees"> <div class="tree"> <div class="tree-top"></div> <div class="tree-bottom"></div> </div> <div class="tree small"> <div class="tree-top"></div> <div class="tree-bottom"></div> </div> </div> <div class="wind-mills"> <div class="wind-mill wind-mill-1"> <div class="foot"></div> <div class="wings"> <div class="wing"></div> </div> </div> <div class="wind-mill wind-mill-2"> <div class="foot"></div> <div class="wings"> <div class="wing"></div> </div> </div> <div class="wind-mill wind-mill-3"> <div class="foot"></div> <div class="wings"> <div class="wing"></div> </div> </div> <div class="wind-mill wind-mill-4"> <div class="foot"></div> <div class="wings"> <div class="wing"></div> </div> </div> </div> </div> |
Осталось лишь залить CSS файл из прикреплённого архива в папку css
