Сосуд с водой анимация

01.12.2020
0
Главная › Сосуды › Сосуд с водой анимация

Вот четыре разных варианта:

1. Используя Easing

Если вы заполняете жидкостью круглую чашу, то она будет заполняться быстрее внизу и сверху, чем в середине (потому что в более широкой средней части больше места для покрытия) Итак, с учетом этого грубого объяснения, анимация должна: начинаться быстро, замедляться посередине, а затем быстро заканчиваться, когда чаша сужается снова наверху.

Для этого мы можем использовать функцию easing CSS3: cub-bezier (.2, .6, .8, .4).

Посмотрите пример ниже.

(Если вы хотите настроить easing здесь, то вот отличный ресурс: https://cubic-bezier.com/#.2,.6,.8,.4)

#banner {
width: 150px;
height: 150px;
position: relative;
background: #000;
border-radius: 50%;
overflow: hidden;
}
#banner::before {
content: ”;
position: absolute;
background: #04ACFF;
width: 100%;
bottom: 0;
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
@keyframes wipe {
0% {
height: 0;
}
100% {
height: 100%;
}
<div id=”banner”>

</div>

2. SVG Deliciousness

Давайте сделаем еще один шаг вперед. Допустим, мы захотим добавить волнистую поверхность на «воду» с помощью CSS. Мы можем сделать это, используя SVG.
Я создал волнистый SVG image в Adobe Illustrator, а затем анимировал image, чтобы перемещать его слева направо в цикле с отдельной анимацией CSS:

Пример

#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #000;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width:300px;
height: 150px;
fill: #04ACFF;
}
@keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
@keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div id=”banner”>
<div class=”fill”>
<svg version=”1.1″ xmlns=”https://www.w3.org/2000/svg” xmlns:xlink=”https://www.w3.org/1999/xlink” x=”0px” y=”0px” width=”300px” height=”300px” viewBox=”0 0 300 300″ enable-background=”new 0 0 300 300″ xml:space=”preserve”>
<path fill=”#04ACFF” id=”waveShape” d=”M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z”/>
</svg>
</div>
</div>

3. С линией наполнения

Этот пример включает линию заливки (большинство чаш заполняется сверху, а не снизу). Линия заливки сначала анимируется сверху вниз, в то время как свойство animation-delay предотвращает выполнение анимации заливки до завершения заливки.

#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #000;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
position: relative;
}

#banner .fill {
transform: translateY(150px);
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
animation-delay: 0.25s;
}

#banner .pour {
width: 6px;
position: absolute;
left: 50%;
margin-left: -3px;
bottom: 0;
top: 0;
background: #009ae6;
animation-name: pourAction;
animation-timing-function: linear;
animation-duration: 0.25s;
}

#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}

@keyframes pourAction {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}

@keyframes fillAction {
0% {
transform: translateY(150px);
}
100% {
transform: translateY(-5px);
}
}

@keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div id=”banner”>
<div class=”pour”></div>
<div class=”fill”>
<svg version=”1.1″ xmlns=”https://www.w3.org/2000/svg” xmlns:xlink=”https://www.w3.org/1999/xlink” x=”0px” y=”0px” width=”300px” height=”300px” viewBox=”0 0 300 300″ enable-background=”new 0 0 300 300″ xml:space=”preserve”>
<path fill=”#04ACFF” id=”waveShape” d=”M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z” />
</svg>
</div>
</div>

Читайте также:  Действие седативных на сосуды

4. С серьезным Bling (с красивой эстетикой)

Этот пример добавляет еще несколько свойств CSS, чтобы сделать его более реалистичным.

.bowl {
position: relative;
border-radius: 50%;
width: 150px;
height: 150px;
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1);
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%);
margin: 20px;
}
.bowl:before {
overflow: hidden;
border-radius: 50%;
content: “”;
box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.5), inset 0 -20px 5px 0 rgba(0, 0, 0, 0.2), inset -15px 0 5px 0 rgba(0, 0, 0, 0.1), inset 15px 0 5px 0 rgba(0, 0, 0, 0.1);
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%);
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.65) 81%, black 100%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 81%, #000000 100%);
position: absolute;
width: 150px;
height: 150px;
z-index: 2;
}
.bowl:after {
content: “”;
width: 60px;
border-radius: 50%;
height: 5px;
background: #039be4;
box-shadow: inset 0 0 10px 0 #000;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
z-index: 2;
}
.bowl .inner {
border-radius: 50%;
width: 150px;
height: 150px;
background: -moz-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 76%, rgba(0, 0, 0, 0.65) 100%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.65) 100%);
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
.bowl .inner:before {
content: “”;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
position: absolute;
right: 40%;
top: 60%;
z-index: 2;
}
.bowl .inner:after {
content: “”;
width: 20px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
position: absolute;
right: 30%;
top: 15%;
transform: rotate(-20deg);
z-index: 2;
}
.bowl .fill {
-webkit-animation-name: fillAction;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: cubic-bezier(0.2, 0.6, 0.8, 0.4);
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
}
.bowl .waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #039be4;
}

@-webkit-keyframes fillAction {
0% {
-webkit-transform: translate(0, 150px);
}
100% {
-webkit-transform: translate(0, 10px);
}
}
@-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(-150px, 0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
/* For aesthetics only ——————————————*/
body {
margin: 0;
font-family: Segoe, “Segoe UI”, “DejaVu Sans”, “Trebuchet MS”, Verdana, sans-serif;
}

Читайте также:  Расширение сосудов кожи способствует

h1 {
font: 200 1.2em “Segoe UI Light”, “DejaVu Sans”, “Trebuchet MS”, Verdana, sans-serif;
font-weight: 200;
color: #fff;
background: #039be4;
padding: 20px;
margin: 0;
border-bottom: 10px solid #ccc;
}
h1 strong {
font-family: “Segoe UI Black”;
font-weight: normal;
}

.explanation {
padding: 20px 40px;
float: right;
background: #e64a19;
-webkit-box-shadow: inset 0 30px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
border-bottom: 10px solid #ccc;
max-width: 300px;
}
.explanation p {
color: #fff;
font-size: 0.8rem;
}
<div class=”bowl”>
<div class=”inner”>
<div class=”fill”>
<svg version=”1.1″ xmlns=”https://www.w3.org/2000/svg” xmlns:xlink=”https://www.w3.org/1999/xlink” x=”0px” y=”0px” width=”300px” height=”300px” viewBox=”0 0 300 300″ enable-background=”new 0 0 300 300″ xml:space=”preserve”>
<path class=”waveShape” d=”M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z” />
</svg>
</div>
</div>
</div>

Источник: Filling water animation @Chris Spittles

Источник

Авось
из 4,95 млн. (+105 сутки) дневников

Воскресенье, 16 Марта 2014 г. 17:36ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:36ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:36ссылка

Спасибо за визит и за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:37ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:37ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:37ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:37ссылка

Спасибо за добрые слова и за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:37ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:38ссылка

Спасибо за визит и за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:38ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:39ссылка

Спасибо за визит и за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:40ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:43ссылка

На фотографии мой внук идёт по поляне, а я сделала коллаж, будто бы он подходит к реке, и даже отражается в ней. Показала его родителям, им очень понравилось.

Понедельник, 17 Марта 2014 г. 17:32ссылка

Спасибо!

Воскресенье, 16 Марта 2014 г. 17:44ссылка

Спасибо за визит и за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:44ссылка

Спасибо за комментарий и за цитирование!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 17:45ссылка

Я Вас поздравляю!
Радуйте родных и друзей весёлыми коллажами.
Всего доброго!

Юкка375   обратиться по имени
Воскресенье, 16 Марта 2014 г. 18:22 (ссылка)

Исходное сообщение Алевтина_Серова
Watereffect.net – генератор эффекта воды
на Вашем фото.

На данном сайте Вы можете просто и быстро создать анимацию GIF с эффектом воды на Вашей фотографии онлайн и в один клик.

Через Обзор загрузите свою фотографию небольшого размера и нажмите на кнопку:
Upload Now! (Добавить и применить эффект воды)

Фотоэффект с Вашей фотографией готов.

Примечание:
Все файлы автоматически удаляются с сервера после процесса преобразования.
Желаю успехов!

Спасибо за ваши комментарии!

Ответить С цитатой В цитатник

Воскресенье, 16 Марта 2014 г. 19:28ссылка

Спасибо за комментарий!

Воскресенье, 16 Марта 2014 г. 19:29ссылка

Спасибо за комментарий и цитирование!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 19:29ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Воскресенье, 16 Марта 2014 г. 19:30ссылка

Спасибо за комментарий!

Понедельник, 17 Марта 2014 г. 17:33ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Понедельник, 17 Марта 2014 г. 17:33ссылка

Спасибо за добрые слова и за комментарий!
Весёлых Вам коллажей!

Понедельник, 17 Марта 2014 г. 17:33ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Понедельник, 17 Марта 2014 г. 17:33ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Понедельник, 17 Марта 2014 г. 17:34ссылка

Спасибо за добрые слова и за комментарий!
Весёлых Вам коллажей!

Понедельник, 17 Марта 2014 г. 17:41ссылка

У меня очень большой, и говорят интересный, дневник.
В самом начале дневника стоит путеводитель – оглавление с кликабельными картинками. Посмотрите сами то, что Вам покажется интересным.
Путеводитель по дневнику. Оглавление.
https://www.liveinternet.ru/users/5144129/post313531572/

Понедельник, 17 Марта 2014 г. 17:41ссылка

Спасибо за комментарий!
Весёлых Вам коллажей!

Понедельник, 17 Марта 2014 г. 17:42ссылка

Спасибо за комментарий и за цитирование!
Весёлых Вам коллажей!

Понедельник, 17 Марта 2014 г. 17:42ссылка

Спасибо за комментарий и за цитирование!
Весёлых Вам коллажей!

‘);
}


Проверка орфографии: (найти ошибки)

 Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку

Источник

Предыдущая статья
Функциональная проба в исследовании сосудов
Следующая статья
Коррекция сосудов на лице
© Про сосуды от врачей отеля