Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.
Из-за большого размера статья разбита на три части. Первая часть. Вторая часть
Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Эффект #22
Для создания этого эффекта нам понадобится дополнить базовую html-структуру двумя блоками с изображениями и одним блоком с иконкой:
<div class="effect eff-22"> <div class="img-block img-block-left"> <img src="img/ef22.jpg" alt="Effect #22" /> </div> <div class="img-block img-block-right"> <img src="img/ef22.jpg" alt="Effect #22" /> </div> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> В данном эффекте, чтобы картинка распалась на две части, мы создаем два блока по половине ширины от блока с эффектом, в каждый из которых помещаем одну и ту же картинку. Вот общие для обоих блоков стили:
.eff-22 .img-block { height: 100%; width: 50%; overflow: hidden; position: absolute; z-index: 5; transition: all 0.3s linear 0s; } Чтобы блоки расходились в разные стороны указанным образом, нам надо задать для них точку, относительно которой будет происходить анимация. Вот стили для каждого блока отдельно:
.eff-22 .img-block-left { top: 0px; left: 0px; transform-origin: right bottom; } .eff-22 .img-block-right { top: 0px; right: 0px; transform-origin: left bottom; } Сейчас у нас и в правом, и в левом блоке отображается по одному и тому же кусочку картинки, поэтому в правом блоке мы сместим картинку влево на 50%:
.eff-22 .img-block-right img { transform: translate(-50%, 0); } Теперь стилизуем .caption. Мы делаем блок прозрачным, чтобы, пока подгружаются картинки, .caption не было видно:
.eff-22 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.3s; } У внутренних элементов .caption сохраняются дефолтные стили.
И стилизуем .overlay: подробнее о составлении равнобедренных треугольников я рассказывала в эффекте #19.
.eff-22 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.2s; } .eff-22 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; } Собираем эффект.
Сжимаем .overlay:
.eff-22:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-22:hover .overlay .icon { opacity: 0; } Стилизуем “распадающуюся” картинку:
.eff-22:hover .img-block-left { transform: rotate(-90deg); } .eff-22:hover .img-block-right { transform: rotate(90deg); } .eff-22:hover .img-block { transition-delay: 0.2s; } Убираем прозрачность .caption:
.eff-22:hover .caption { opacity: 1; transition-delay: 0s; } Эффект #23
Для создания этого эффекта нам понадобится дополнить базовую html-структуру двумя блоками с изображениями и одним блоком с иконкой:
<div class="effect eff-23"> <div class="img-block img-block-top"> <img src="img/ef23.jpg" alt="Effect #23" /> </div> <div class="img-block img-block-bottom"> <img src="img/ef23.jpg" alt="Effect #23" /> </div> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Чтобы картинка раскрывалась на две части, мы, как и в эффекте #22, создаем два блока, каждый из которых занимает половину высоты блока с эффектом, и в каждый из этих блоков кладем одну и ту же картинку. Общие стили для обоих блоков:
.eff-23 .img-block { height: 50%; width: 100%; overflow: hidden; position: absolute; z-index: 5; transition: all 0.3s linear 0s; } Чтобы блоки “сжимались” относительно верхней и нижней границы блока с эффектом, нам надо задать transform-origin для каждого из них:
.eff-23 .img-block-top { top: 0px; left: 0px; transform-origin: top; } .eff-23 .img-block-bottom { bottom: 0px; left: 0px; transform-origin: bottom; } Теперь мы можем видеть и на верхнем, и на нижнем блоке одну и ту же часть изображения, поэтому подвинем изображение в нижнем блоке на 50% вверх, чтобы стало видно его нижнюю часть:
.eff-23 .img-block-bottom img { transform: translate(0, -50%); } Теперь стилизуем .caption. Мы делаем блок прозрачным, чтобы, пока подгружаются картинки, .caption не было видно:
.eff-23 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.3s; } У внутренних элементов .caption сохраняются дефолтные стили.
Стилизуем .overlay: подробнее о составлении равнобедренных треугольников я рассказывала в эффекте #19.
.eff-23 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.1s; } .eff-23 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; } Собираем эффект.
Сжимаем блоки с картинками к краям блока с эффектами:
.eff-23:hover .img-block { transform: scaleY(0); transition-delay: 0.2s; } Убираем .overlay:
.eff-23:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-23:hover .overlay .icon { opacity: 0; } Возвращаем .caption непрозрачность:
.eff-23:hover .caption { opacity: 1; transition-delay: 0s; } Эффект #24
Для создания этого эффекта нам необходимо дополнить дефолтную html-структуру четырьмя блоками с картинками внутри и блоком с иконкой:
<div class="effect eff-24"> <div class="img-block img-block-1"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-2"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-3"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-4"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Чтобы создать такой эффект поднимающейся “шторки”, необходимо взять четыре блока и поместить в них одну и ту же картинку. Высота каждого блока составляет четверть от высоты блока с эффектом:
.eff-24 .img-block { width: 100%; height: 25%; position: absolute; overflow: hidden; left: 0px; } Каждый блок располагается ниже предыдущего на 25%, а изображение в каждом следующем блоке поднимается на 25% относительно положения картинки в предыдущем блоке (более подробно о такой организации блоков и картинок можно почитать в описании эффектов #7-9). Поскольку, при наведении, четвертый блок уходит вверх и прячется под третий, потом они оба уходят еще выше и прячутся под второй, а потом все три — под первый, самый большой z-index будет у первого блока, а самый маленький — у четвертого. Вот стили для всех четырех блоков и их изображений:
.eff-24 .img-block-1 { top: 0px; z-index: 5; transition: all 0.15s linear 0s; } .eff-24 .img-block-2 { top: 25%; z-index: 4; transition: all 0.3s linear 0s; } .eff-24 .img-block-2 img { transform: translateY(-25%); } .eff-24 .img-block-3 { top: 50%; z-index: 3; transition: all 0.45s linear 0s; } .eff-24 .img-block-3 img { transform: translateY(-50%); } .eff-24 .img-block-4 { top: 75%; z-index: 2; transition: all 0.6s linear 0s; } .eff-24 .img-block-4 img { transform: translateY(-75%); } Теперь стилизуем .caption. Мы делаем блок прозрачным, чтобы, пока подгружаются картинки, .caption не было видно:
.eff-24 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.6s; } У внутренних элементов .caption сохраняются дефолтные стили.
Стилизуем .overlay. Подробнее о составлении равнобедренных треугольников я рассказывала в эффекте #19.
.eff-24 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.5s; } .eff-24 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; } Собираем эффект.
Задача — убрать все блоки с изображениями так, чтобы скрыть даже самый первый блок за пределы блока с эффектом. Таким образом, поднимем их все до 25% выше верхнего края блока с эффектом:
.eff-24:hover .img-block { top: -25%; } Эффект “шторки” достигается комбинацией времени, выделенного на анимацию (мы прописывали это выше) и задержки подъема:
.eff-24:hover .img-block-3 { transition-delay: 0.15s; } .eff-24:hover .img-block-2 { transition-delay: 0.3s; } .eff-24:hover .img-block-1 { transition-delay: 0.45s; } Убираем .overlay:
.eff-24:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-24:hover .overlay .icon { opacity: 0; } Делаем .caption непрозрачным:
.eff-24:hover .caption { opacity: 1; transition-delay: 0s; } Эффект #25
Для создания этого эффекта в дефолтную html-структуру включен блок с иконкой и три блока, которые будут поочередно появляться:
<div class="effect eff-25"> <img src="img/ef25.jpg" alt="Effect #25" /> <div class="overlay"> <div class="icon"></div> </div> <div class="flash flash-1"></div> <div class="flash flash-2"></div> <div class="flash flash-3"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Начнем со стилей для .flash блоков. Их три, они занимают по трети высоты блока с эффектом каждый:
.eff-25 .flash { position: absolute; width: 100%; height: 100px; opacity: 0; left: 0px; background: rgba(255,255,255,0.4); } .eff-25 .flash-1 { top: 0px; } .eff-25 .flash-2 { top: 100px; } .eff-25 .flash-3 { top: 200px; } Теперь стилизуем .overlay, у которого сначала изменяется ширина, и он словно растягивается, а потом положение относительно блока, поскольку он отъезжает влево, за пределы блока с эффектом:
.eff-25 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-25 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-25 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; } Прячем .caption за нижний край блока с эффектом и даем ей более сложный transition-timing-function:
.eff-25 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s; } Стили элементов .caption остаются дефолтными.
Теперь наша задача сделать так, чтобы при наведении сначала один .flash появлялся и исчезал, и только потом появлялся следующий. Чтобы это сделать, мы должны воспользоваться свойством animation и сопутствующим ему @keyframes. Начнем с @keyframes: он нужен для того, чтобы задать имя будущей анимации и ключевые точки, который проходит в своем движении анимируемый элемент. У .flash есть три ключевый точки:
- начальная, в которой он прозрачен
- средняя, в которой он появляется
- конечная, в которой он снова прозрачен
Таким образом, мы можем задать такой @keyframes, где flash — это имя анимации:
@keyframes flash { from {opacity: 0;} 50% {opacity: 1;} to {opacity: 0;} } Теперь собираем эффект.
При наведении нам нужно запустить анимацию. Для этого мы используем свойство animation. Здесь мы используем три параметра: имя, время, необходимое на прохождение всех ключевых точек каждой вспышки и animation-timing-function, аналогичная transition-timing-function.
.eff-25:hover .flash { animation: flash 0.3s linear; } Теперь, если посмотреть, что получилось, станет видно, что все .flash вспыхивают одновременно и гаснут, таким образом, нам надо использовать еще один параметр animation — задержку, работающую аналогично задержке для transition:
.eff-25:hover .flash-1 { animation-delay: 0.45s; } .eff-25:hover .flash-2 { animation-delay: 0.55s; } .eff-25:hover .flash-3 { animation-delay: 0.65s; } Добавляем “растяжение” и исчезновение .overlay:
.eff-25:hover .overlay { width: 170px; left: -190px; } И поднимаем .caption:
.eff-25:hover .caption { top: 0px; transition-delay: 0.8s; } Эффект #26
Для создания этого эффекта необходимо добавить в дефолтную структуру блок с иконкой и блок-полоску, который будет видно при наведении:
<div class="effect eff-26"> <img src="img/ef26.jpg" alt="Effect #26" /> <div class="overlay"> <div class="icon"></div> </div> <div class="flash"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Начнем со стилизации полоски. Это узкий длинный блок, который будет опускаться и подниматься при наведении. Он вынесен в начальную точку анимации: вверх, за пределы блока с эффектом.
.eff-26 .flash { position: absolute; left: -200px; top: -200px; background-color: rgba(255,255,255,0.6); width: 590px; height: 100px; transform: rotate(-25deg); } Теперь зададим @keyframes для определения ключевых точек анимации (подробнее про это написано в эффекте #25):
@keyframes flash-movement { from {top: -200px;} to {top: 400px;} } Зададим стили для .overlay, о котором подробнее тоже рассказано в эффекте #25:
.eff-26 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-26 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-26 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; } И зададим прозрачность для .caption:
.eff-26 .caption { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } У внутренних элементов .caption остаются дефолтные стили.
Собираем эффект.
Запускаем анимацию блока с полоской. Как видите, здесь используется больше параметров свойства animation, чем в прошлом эффекте. Кроме названия анимации, времени и animation-timing-function используется еще:
- iteration-count — сколько раз будем проигрывать анимацию. В данном случае — дважды: сверху вниз и снизу вверх.
- animation-direction — показывает, будет ли элемент проходить ключевые точки в прямом порядке (от from к to) или в обратном (от to к from). Значение alternate означает, что в каждый нечетный проигрыш анимация будет идти в прямом порядке, а в каждый четный — в обратном, вот почему первый раз полоска движется сверху вниз, а второй раз — снизу вверх.
.eff-26:hover .flash { animation: flash-movement 0.4s linear 0.45s 2 alternate; } Убираем .overlay:
.eff-26:hover .overlay { width: 170px; left: -190px; } Меняем прозрачность .caption:
.eff-26:hover .caption { opacity: 1; transition-delay: 0.8s; } Эффект #27
Для работы с этим эффектом необходимо дополнить дефолтную html-структуру блоком с иконкой и блоком с кругом:
<div class="effect eff-27"> <img src="img/ef27.jpg" alt="Effect #27" /> <div class="overlay"> <div class="icon"></div> </div> <div class="circle"> <div class="half-circle half-circle-left"></div> <div class="half-circle half-circle-right"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Начнем с блока с кругом, который появляется при наведении. Стили для самого блока:
.eff-27 .circle { width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; opacity: 0; } При наведении круг распадается на две половины, чтобы это осуществить, соберем его из двух полукруглых блоков, которые и будем потом отодвигать друг от друга:
.eff-27 .circle .half-circle { background: rgba(255,255,255,0.6); width: 50px; height: 100px; position: absolute; } .eff-27 .circle .half-circle-left { top: 0px; left: 0px; border-radius: 100px 0px 0px 100px; } .eff-27 .circle .half-circle-right { top: 0px; right: 0px; border-radius: 0px 100px 100px 0px; } Теперь создаем @keyframes для каждого из полукруглых блоков. Подробнее о @keyframes я писала в эффекте #25. Как видим, каждый из полукругов проходит три ключевых точки:
- полукруг находится на своем дефолтном месте и является частью круга
- он отходит в сторону, уменьшается в размерах и превращается в полноценный круг
- улетает за пределы блока с эффектом
@keyframes half-circle-left { from { top: 0px; left: 0px; border-radius: 100px 0px 0px 100px; } 20% { top: 25px; left: -15px; height: 50px; border-radius: 100px; } to { top: 0px; left: -500px; height: 50px; border-radius: 100px; } } @keyframes half-circle-right { from { top: 0px; right: 0px; border-radius: 0px 100px 100px 0px; } 20% { top: 25px; right: -15px; height: 50px; border-radius: 100px; } to { top: 0px; right: -500px; height: 50px; border-radius: 100px; } } Зададим стили для .overlay, о котором подробнее тоже рассказано в эффекте #25:
.eff-27 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-27 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-27 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; } Уберем вниз .caption
.eff-27 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } У остальных элементов .caption остаются дефолтные стили.
Собираем эффект.
Сначала меняем прозрачность блока с кругом:
.eff-27:hover .circle { opacity: 1; transition-delay: 0.4s; } Потом вызываем анимации каждого из полукругов. Кроме параметров, рассмотренных в эффектах #25-26, мы используем тут один новый параметр: animation-fill-mode. Этот параметр определяет, какие стили применяются к анимированным элементам, когда анимация закончена или остановлена. По дефолту, после анимации элементы возвращаются в положение, заданное первой ключевой точкой @keyframes, что нам здесь совершенно не нужно, иначе прямо за .caption снова появится белый круг. Значение forwards необходимо для того, чтобы элементы оставались в положении, заданном последней ключевой точкой @keyframes, то есть, за пределами блока с эффектом:
.eff-27:hover .half-circle-left { animation: half-circle-left 1s linear 0.55s forwards; } .eff-27:hover .half-circle-right { animation: half-circle-right 1s linear 0.55s forwards; } Теперь убираем .overlay:
.eff-27:hover .overlay { width: 170px; left: -190px; } И выдвигаем вверх .caption:
.eff-27:hover .caption { top: 0px; transition-delay: 1s; } Эффект #28
Для работы с этим эффектом необходимо дополнить дефолтную html-структуру блоком с иконкой и блоком с полукруглой выемкой, который становится виден при наведении:
<div class="effect eff-28"> <img src="img/ef28.jpg" alt="Effect #28" /> <div class="overlay"> <div class="icon"></div> </div> <div class="circle"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Начнем с блока с выемкой. Сам по себе этот блок — большая окружность с границей, ширина которой — 3px, расположенная так, чтобы только часть ее находилась в пределах блока с эффектом. Чтобы заполнить фоном все пространство блока с эффектом по левую сторону от окружности, дадим ей большую полупрозрачную тень:
.eff-28 .circle { width: 600px; height: 600px; border: 3px solid rgba(255,255,255,0.6); -webkit-border-radius: 300px; border-radius: 300px; position: absolute; bottom: -50px; left: 50px; box-shadow: 0px 0px 235px 1000px rgba(255,255,255,0.5); opacity: 0; transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s; } Теперь уменьшим размер .caption до нуля:
.eff-28 .caption { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transform: scale(0); transition: all 0.2s linear 0s; } У прочих элементов .caption остаются дефолтные стили.
Остается только стилизовать блок с иконкой. Вот его базовые стили:
.eff-28 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-28 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; } Задача — прописать ему анимацию “подпрыгивания”, и для этого нам понадобится вот такой @keyframes (подробнее о @keyframes можно прочитать в эффекте #25). Элемент проходит пять ключевых точек:
- Исходное положение
- Ударяется о нижний край блока с эффектом
- Возвращается в исходное положение
- Ударяется о верхний край блока с эффектом
- Ускоряясь, улетает за край блока с эффектом
@keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} } Собираем эффект.
Сначала применяем анимацию к блоку с иконкой. Animation подробно рассматривался в эффекте #25, параметр animation-fill-mode в эффекте #27:
.eff-28:hover .overlay { animation: bounce 0.5s linear forwards; } Потом, изменяя прозрачность, ширину и высоту элемента с выемкой, создаем иллюзию движения этого блока:
.eff-28:hover .circle { opacity: 1; width: 400px; height: 400px; transition-delay: 0.35s; } И, наконец, увеличиваем .caption:
.eff-28:hover .caption { transform: scale(1); transition-delay: 0.9s; } Эффект #29
Для этого эффекта необходимо дополнить дефолтную html-структуру блоком с иконкой и квадратным блоком, появляющимся при наведении:
<div class="effect eff-29"> <img src="img/ef29.jpg" alt="Effect #29" /> <div class="overlay"> <div class="icon"></div> </div> <div class="square"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Начнем с квадратного блока. Начальных стилей у этого блока совсем немного, потому что основные стили, включая transition, будут применены к нему только при наведении:
.eff-29 .square { width: 84%; height: 84%; position: absolute; top: 7%; left: 7%; border: 3px solid rgba(255,255,255,0.6); border-radius: 10px; transform: scale(0); opacity: 0; } Перемещаем .caption наверх, за пределы блока с эффектом:
.eff-29 .caption { position: absolute; top: -100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Внутренние элементы .caption сохраняют дефолтные стили.
Стилизуем блок с иконкой полностью аналогично этому же блоку из эффекта #28, где я рассматривала эти стили подробнее, здесь я только приведу сами стили и @keyframes:
.eff-29 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-29 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; } @keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} } Собираем эффект.
Сначала добавляем стили для квадратного блока. Увеличиваем его в размерах, делаем его непрозрачным и добавляем тень, чтобы создать иллюзию наличия фона за границами квадрата. Почему мы добавляем transition только при наведении — потому что при отмене hover квадрат сразу должен исчезать.
.eff-29:hover .square { transform: scale(1); opacity: 1; box-shadow: 0px 0px 200px 60px rgba(255,255,255,0.4); transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s; } Добавляем анимацию блока с иконкой, animation подробно рассматривался в эффекте #25, параметр animation-fill-mode в эффекте #27:
.eff-29:hover .overlay { animation: bounce 0.5s linear forwards; } И опускаем .caption:
.eff-29:hover .caption { top: 0px; transition-delay: 0.8s; } Эффект #30
Чтобы создать этот эффект, нам необходимо дополнить дефолтную html-структуру блоком с иконкой и блоком с пузырьками, в котором нужно создать столько блоков-пузырьков, сколько вы хотите видеть в вашем эффекте:
<div class="effect eff-30"> <img src="img/ef30.jpg" alt="Effect #30" /> <div class="overlay"> <div class="icon"></div> </div> <div class="bubbles"> <div class="bubble"></div> <div class="bubble bubble-2"></div> <div class="bubble bubble-3"></div> <div class="bubble bubble-4"></div> <div class="bubble bubble-5"></div> <div class="bubble bubble-6"></div> <div class="bubble bubble-7"></div> <div class="bubble bubble-8"></div> <div class="bubble bubble-9"></div> <div class="bubble bubble-10"></div> <div class="bubble bubble-11"></div> <div class="bubble bubble-12"></div> <div class="bubble bubble-13"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Начнем с блока с иконкой. Он полностью аналогичен этому же блоку из эффекта #28, где и можно прочитать про него подробнее, здесь я только приведу сами стили и @keyframes:
.eff-30 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-30 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; } @keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} } Теперь прячем .caption за нижней границей блока с эффектом:
.eff-30 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.4s linear 0s; } Внутренние элементы .caption сохраняют дефолтные стили.
Теперь самое интересное — блок с пузырьками и сами пузырьки.
Стили для блока с пузырьками:
.eff-30 .bubbles { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Стили для каждого пузырька (почитать подробнее про радиальные градиенты можно в эффекте #10):
.eff-30 .bubbles .bubble { width: 43px; height: 43px; position: absolute; top: 100%; background: radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) ); border-radius: 300px; } Дальше наша задача расположить пузырьки по горизонтали вразнобой, чтобы они не поднимались в одном и том же месте:
.eff-30 .bubbles .bubble-2 { left: 20px; } .eff-30 .bubbles .bubble-3 { left: 60px; } .eff-30 .bubbles .bubble-4 { left: 90px; } .eff-30 .bubbles .bubble-5 { left: 120px; } .eff-30 .bubbles .bubble-6 { left: 150px; } .eff-30 .bubbles .bubble-7 { left: 250px; } .eff-30 .bubbles .bubble-8 { left: 300px; } .eff-30 .bubbles .bubble-9 { left: 190px; } .eff-30 .bubbles .bubble-10 { left: 220px; } .eff-30 .bubbles .bubble-11 { left: 270px; } .eff-30 .bubbles .bubble-12 { left: 45px; } .eff-30 .bubbles .bubble-13 { left: 15px; } И @keyframes (подробнее о котором я написала в эффекте #25) для них самый простой, состоящий из двух ключевых точек:
@keyframes bubble { from { top: 100%; } to { top: -100%; } } Собираем эффект.
Добавляем анимацию блока с иконкой, animation подробно рассматривался в эффекте #25, параметр animation-fill-mode в эффекте #27:
.eff-30:hover .overlay { animation: bounce 0.6s linear forwards; } Потом запускаем пузырьки. Вызываем анимацию для них. В данном случае мы используем, кроме прочих, рассмотреных в эффекте #25 параметров, параметр animation-iteration-count со значением infinite, что означает, что анимация будет проигрываться бесконечное количество раз. Пока курсор наведен на блок с эффектом, пузырьки не перестанут лететь:
.eff-30:hover .bubbles .bubble { animation: bubble 9s infinite; } Теперь, чтобы пузырьки вылетали еще и в разное время, выставим им задержку:
.eff-30:hover .bubbles .bubble-2 { animation-delay: 2s; } .eff-30:hover .bubbles .bubble-3 { animation-delay: 6s; } .eff-30:hover .bubbles .bubble-4 { animation-delay: 3.5s; } .eff-30:hover .bubbles .bubble-5 { animation-delay: 4s; } .eff-30:hover .bubbles .bubble-6 { animation-delay: 7.2s; } .eff-30:hover .bubbles .bubble-7 { animation-delay: 1s; } .eff-30:hover .bubbles .bubble-8 { animation-delay: 2.6s; } .eff-30:hover .bubbles .bubble-9 { animation-delay: 5s; } .eff-30:hover .bubbles .bubble-10 { animation-delay: 6.4s; } .eff-30:hover .bubbles .bubble-11 { animation-delay: 8s; } .eff-30:hover .bubbles .bubble-12 { animation-delay: 5.3s; } .eff-30:hover .bubbles .bubble-13 { animation-delay: 8.5s; } Остается только поднять .caption:
.eff-30:hover .caption { top: 0px; transition-delay: 0.7s; } Надеюсь, моя статья оказалась вам полезна и вдохновила на украшение ваших сайтов новыми, интересными эффектами!
ссылка на оригинал статьи http://habrahabr.ru/post/274007/
Добавить комментарий