css的动画

css的动画是作用于div，给div加css动画例如div旋转动画

css部分

.zhuan1{
/*动画名字为转1   0.3秒一次  执行一次 停止*/
    animation:zhuan1 0.3s ease both;
/*等待0s开始*/
    animation-delay:0s;
/*过程匀速进行*/
    animation-timing-function: linear;
}
/*转动画 0%的时候执行角度为0deg 100%执行角度为180deg*/
@-webkit-keyframes zhuan1{
    0%{
        transform: rotate(0deg);
    }
    100%{transform: rotate(180deg);}
}
.zhuan2{
/*动画名字为转 0.3秒一次  执行一次 停止*/
    animation:zhuan2 0.3s ease both;
/*等待0s开始*/
    animation-delay:0s;
/*过程匀速进行*/
    animation-timing-function: linear;
}
/*转动画 0%的时候执行角度为180deg 100%执行角度为0deg*/
@-webkit-keyframes zhuan2{
    0%{
        transform: rotate(180deg);
    }
    100%{transform: rotate(0deg);}
}

js部分

//导航字体移入移出显示变色
function xianshibianse(){
    $(".li_").mouseenter(function(){
        $(this).css('color','#108EE9');
        //自定义了一个bs变量，bs是自定义属性bs的值
        //下拉框显示隐藏
        var bs = $(this).attr('bs'); 
        $("#daohangxiala"+bs).css("display","block");
        //自定义一个class属性样式：动画zhuan1和zhuan2，鼠标移入执行动画1，删除动画2
        $(".abc"+bs).removeClass("zhuan2");
        $(".abc"+bs).addClass("zhuan1");
    })
    $(".li_").mouseleave(function(){
        $(this).css('color','white');
        var bs = $(this).attr('bs'); 
        $("#daohangxiala"+bs).css("display","none");
        //自定义一个class属性样式：动画zhuan1和zhuan2，鼠标移入执行动画2，删除动画1
        $(".abc"+bs).removeClass("zhuan1");
        $(".abc"+bs).addClass("zhuan2");
    })

猜你喜欢