Пример:
Светлая секция
Темная секция
Светлая секция
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="light-block">Светлая секция</div> <svg class="wave-divider" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="wave-parallax1"><use xlink:href="#gentle-wave" x="50" y="3" fill="#BFE2FF"/></g> <g class="wave-parallax2"><use xlink:href="#gentle-wave" x="50" y="0" fill="#5e9cd1"/></g> <g class="wave-parallax3"><use xlink:href="#gentle-wave" x="50" y="9" fill="#73bbf5"/></g> <g class="wave-parallax4"><use xlink:href="#gentle-wave" x="50" y="6" fill="#337AB7"/></g> </svg> <div class="dark-block">Темная секция</div> <svg class="wave-divider dark-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"> <g class="wave-parallax1"><use xlink:href="#gentle-wave" x="50" y="3" fill="#5e9cd1"/></g> <g class="wave-parallax2"><use xlink:href="#gentle-wave" x="50" y="0" fill="#73bbf5"/></g> <g class="wave-parallax3"><use xlink:href="#gentle-wave" x="50" y="9" fill="#BFE2FF"/></g> <g class="wave-parallax4"><use xlink:href="#gentle-wave" x="50" y="6" fill="#FFFFFF"/></g> </svg> <div class="light-block">Светлая секция</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 |
.wave-divider { width: 100%; height: 60px; display:block; } .wave-parallax1 { animation: wave-move1 10s linear infinite; } .wave-parallax2 { animation: wave-move2 8s linear infinite; } .wave-parallax3 { animation: wave-move3 6s linear infinite; } .wave-parallax4 { animation: wave-move4 4s linear infinite; } @keyframes wave-move1 { 0% { transform: translateX(85px); } 100% { transform: translateX(-90px); } } @keyframes wave-move2 { 0% { transform: translateX(-90px); } 100% { transform: translateX(85px); } } @keyframes wave-move3 { 0% { transform: translateX(85px); } 100% { transform: translateX(-90px); } } @keyframes wave-move4 { 0% { transform: translateX(-90px); } 100% { transform: translateX(85px); } } .dark-block { background: #337AB7; padding: 50px 0; font-size: 26px; font-family: 'Roboto', sans-serif; text-align: center; color: #FFF; } .dark-bg { background: #337AB7; } .light-block { background: #FFF; padding: 50px 0; font-size: 26px; font-family: 'Roboto', sans-serif; text-align: center; color: #337AB7; } |
Спасибо тебе, добрый человек!
Весь сайт - хорошее подспорье для НЕпрофессионалов.
Молодец!
Здравствуйте! В мобильной версии появляются полосы, которые портят вид. Как можно исправить?
Контейнер для них должен быть с overflow-x: hidden
На самом деле Супер!