8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.container { | |||
width: 50vw; /* Ширина контейнера */ | |||
height: 100vh; /* Высота контейнера */ | |||
overflow: hidden; | |||
position: relative; | |||
background-color: #fff; /* Цвет фона контейнера */ | |||
} | |||
.wave { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 200%; | |||
height: 200%; | |||
background: linear-gradient(90deg, lightcoral 25%, lightblue 25%, lightblue 50%, lightcoral 50%, lightcoral 75%, lightblue 75%); | |||
background-size: 200% 200%; | |||
animation: waveAnimation 4s infinite linear; | |||
} | |||
@keyframes waveAnimation { | |||
0% { | |||
background-position: 0% 0%; | |||
} | |||
100% { | |||
background-position: 100% 100%; | |||
} | |||
} | |||
.circle { | |||
position: absolute; | |||
border-radius: 50%; | |||
background: white; | |||
opacity: 0.7; | |||
} | |||
.circle-1 { | |||
width: 100px; | |||
height: 100px; | |||
top: 20%; | |||
left: 15%; | |||
} | |||
.circle-2 { | |||
width: 150px; | |||
height: 150px; | |||
top: 60%; | |||
left: 50%; | |||
} | |||
.circle-3 { | |||
width: 80px; | |||
height: 80px; | |||
top: 30%; | |||
right: 10%; | |||
} | |||
li.tooladd { | li.tooladd { | ||
position: relative; | position: relative; | ||