Эффект "кругов на воде" на чистом CSS
Начинаем с описания модели анимации и создания соответствующей таблицы стилей. Модель будет следующая. В контейнере заданного размера будут размещаться абсолютно позиционированные блоки с "кругами на воде" в нужном количестве и нужных цветов.
Code: Убрать нумерацию
- <style type="text/css">
- .water {
- position: relative;
- display: inline-block;
- }
- .ripple1, .ripple2, .ripple3, .ripple4 {
- position: absolute;
- border-radius: 20px;
- left: -20px;
- right: -20px;
- top: -20px;
- bottom: -20px;
- opacity: 0;
- animation: water 4s linear infinite;
- }
- .ripple1 {
- border: 2px solid #909090;
- animation-delay: 0s;
- }
- .ripple2 {
- border: 2px solid #FF0000;
- animation-delay: 1s;
- }
- .ripple3 {
- border: 2px solid #0000FF;
- animation-delay: 2s;
- }
- .ripple4 {
- border: 2px solid #00FF00;
- animation-delay: 3s;
- }
- @keyframes water {
- 0% {
- transform: scale(0.6);
- opacity: 0;
- }
- 33% {
- transform: scale(0.8);
- opacity: 0.8;
- }
- 66% {
- transform: scale(1);
- opacity: 1;
- }
- 100% {
- transform: scale(1.2);
- opacity: 0;
- }
- }
- </style>
Верстка блока с анимацией будет следующей. Это упомянутый контейнер, его основное содержимое и блоки с "кругами".
Code (HTML) : Убрать нумерацию
- <div class="water">
- <div class="ripple1"></div>
- <div class="ripple2"></div>
- <div class="ripple3"></div>
- <div class="ripple4"></div>
- <img src="rybov.jpg" style="border-radius: 20px;">
- </div>
Просмотров: 446 | Комментариев: 0
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,983 раза
Поблагодарили 35,983 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |