Блог

Главная - Вопросы по программированию - Анимация плавное перемещение одной вкладки на другую с помощью мыши

Анимация плавное перемещение одной вкладки на другую с помощью мыши

#jquery #tabs #hover #accordion

Вопрос:

Я хочу плавную анимацию с одной вкладки 1 на другую вкладку при наведении мыши, как я могу анимировать div, чтобы плавно перемещаться слева направо или справа налево. Я сделал цвет фона при наведении курсора мыши, поэтому вкладка «Цвет фона» должна переместиться. также я хочу, чтобы вкладки были во всю ширину, в настоящее время они занимают левое и правое пространство в пустом.введите описание изображения здесь пожалуйста, помогите

 a:hover,
a:focus{
    text-decoration: none;
    outline: none;
}
.tab{ font-family: "Gotham"; }
.tab .nav-tabs{
    background-color: #c8e8e9;
    padding: 0 0 1px;
    margin: 0 0 10px;
    border: none;
    /*box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.15);*/
}
.tab .nav-tabs li a{
    color: #000;
    background: #c8e8e9;
    font-size: 1.0em;
    font-weight: 100;
    padding: 25px 36px 20px 37px;
    /*margin: 0 5px 0 0;*/
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0.3s;
    border-radius:50px;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a:hover{
    color: #000;
    border: none;
}
.tab .nav-tabs li a:before,
.tab .nav-tabs li a:after{
    width: 100%;
    height: 100%;
    /*border-radius: 50px;*/
    opacity: 0.5;
    transform: scaleX(0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.tab .nav-tabs li a:after{
    background-color: #ffc20e;
    transform: scaleX(0);
    
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before{
    opacity: 0;
    transform: scaleX(0);
}
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:hover:after{
    opacity: 1;
    transform: scaleX(1);
    background-color: #ffc20e;
}
.tab .tab-content{
    color: #333;
    background-color: #fff;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    position: relative;
    border: 1px solid #dbdbdb;
}
.tab .nav-tabs li a i{
    font-size: 14px;
    margin-right: 10px;
    display: inline-block;
    margin-top: 5px;
}

.tabs .title{
    font-size: 16px;
    margin-right: 10px;
    color:#101010;
    font-weight:100;
}
.tabs .title-head{
    font-size: 18px;
    margin-right: 10px;
    color:#2aa5ab;
    font-weight:500;
} 
 <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-university" aria-hidden="true"></i>tab 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-book" aria-hidden="true"></i>tab 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-graduation-cap" aria-hidden="true"></i>tab 3</a></li>
                    <li role="presentation"><a href="#Section4" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-picture-o" aria-hidden="true"></i>tab 4</a></li>
                    <li role="presentation"><a href="#Section5" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-newspaper-o" aria-hidden="true"></i>tab 5</a></li>
                </ul>
Метки: