Задача, чтобы при наведении бордеры крутились на 90deg. Нужно чтоб при наведении срабатывала анимация полностью, пока не закончится. Уже долго ищу ответ. Кто знает как такое делается на jquery? Эффект с opacity получается, а вот rotate нет.
$(document).ready(function(){
$('.box')
.hover(function() {
$('.border-first').stop().animate({
opacity: 0.2
}, 'slow');
}, function() {
$('.border-first').stop().animate({
opacity: 1
}, 'slow');
});
});
.wrap {
width: 100%;
height: 100%;
padding: 100px;
background: #f5f5f5;
position: relative;
display: block;
margin: 0 auto;
}
.box {
margin: 0 15px;
display: inline-block;
position: relative;
text-align: center;
min-width: 300px;
}
.icon {
width: 50px;
margin: 0 auto;
padding: 50px;
}
.icon img {
width: 100%;
}
.border-first {
width: 100px;
height: 100px;
position: absolute;
transform: rotate(0deg);
top: 25px;
left: 50%;
margin-left: -50px;
border: 3px solid #333333;
}
.border-second {
width: 100px;
height: 100px;
position: absolute;
transform: rotate(45deg);
top: 25px;
left: 50%;
margin-left: -50px;
border: 3px solid tomato;
}
.text {
font-family: Roboto, sans-serif;
font-size: 20px;
color: #333;
padding: 30px 0;
}
<div class="wrap">
<div class="box">
<div class="icon">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="icon">
</div>
<div class="border-first"></div>
<div class="border-second"></div>
<div class="text">
Hello, A im super block with animation!!!
</div>
</div>
<div class="box">
<div class="icon">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="icon">
</div>
<div class="border-first"></div>
<div class="border-second"></div>
<div class="text">
Hello, A im super block with animation!!!
</div>
</div>
<div class="box">
<div class="icon">
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="icon">
</div>
<div class="border-first"></div>
<div class="border-second"></div>
<div class="text">
Hello, A im super block with animation!!!
</div>
</div>
</div>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Добрый день уважаемыеПодскажите, пожалуйста как реализовать на CSS отображение трехуровневого меню Вот на этом примере
Есть фиксированный хедер, в нём есть кнопка (#button), фон кнопки изначально прозраченНо при прокрутке страницы вниз на 100vh фон кнопки должен...
Как сделать выбор рейтинга в виде звёзд? И нужно поставить звёзды в формате svg, svg имеютсяА допустим если использовать плагин jquery bar rating, то там...
У меня вопрос касаемо того, какие классы Bootstrap, предназначенные для создания адаптивного макета, могут быть вложены друг в другаРазумеется,...