133 Вам приходилось быть на месте человека, когда вы любите кого-то, а вас нет? Хотя, мы не можем заставить кого-то полюбить, но в качестве подарка можем предложить любовный напиток с пузырьками на CSS.
Для такой смеси мы сначала использовали простое изображение колбы, а затем и пузырьки, выполненные с помощью HTML разметки и CSS стилей (в т.ч. и анимация).
HTML разметка пузырьков
|
1 2 3 4 5 |
<div id="beaker"> <span> <span> </span> </span> </div> |
Пузырьки сделали, теперь нужно, чтобы они вели себя, как пузырьки. Мы могли бы использовать для анимации Javascript, но это не весело. Поэтому, будем использовать только CSS!
Есть несколько вещей, которые мы должны учитывать, когда будем делать анимацию. Первое, очевидно, вертикальное позиционирование, но еще и размер пузырьков, во время их путешествия вверх. И наконец, нужна анимация разрыва. Посмотрите bubbleFloat и redPulse, чтобы понять, как это сделано.
Анимация
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@-webkit-keyframes bubbleFloat { from { bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out; } 1% { bottom: 110px; -webkit-transform: scale(.3); opacity: 0; -webkit-animation-timing-function: ease-in-out; } 30% { bottom: 110px; -webkit-transform: scale(.8); opacity: 1; -webkit-animation-timing-function: ease-in-out; } 95% { bottom: 545px; -webkit-transform: scale(.3); opacity: 1; -webkit-animation-timing-function: ease-in-out; } 99% { bottom: 550px; -webkit-transform: scale(3); opacity: 0; -webkit-animation-timing-function: ease-in-out; } to { bottom: 110px; -webkit-transform: scale(.9); opacity: 0; -webkit-animation-timing-function: ease-in-out; } } @-webkit-keyframes redPulse { from { -webkit-box-shadow: 0 0 30px #eb1c2a;} 50% { -webkit-box-shadow: 0 0 80px #c91a26; } to { -webkit-box-shadow: 0 0 30px #eb1c2a;} } |
Вот и все.
Сделаем немного пузырьков
|
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 |
div#beaker { height: 700px; position: relative; } div#beaker span.bubble { width: 100px; height: 100px; position: absolute; display: block; left: 120px; bottom: 110px; -webkit-border-radius: 200px; background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(239,29,43,.2)), to(rgba(255,255,255,.7))); -webkit-animation-name: bubbleFloat; -webkit-animation-duration: 5s; -webkit-animation-iteration-count:infinite; } div#beaker span.glow { width: 100%; height: 100%; position: relative; display: block; -webkit-border-radius: 200px; -webkit-animation-name: redPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:infinite; } |
Надеемся, вам понравилось.)))
Хороший эксперимент -_<