html字体竖排旋转180度 css3+jq--小箭头旋转180度案例

html:

得茶说明

css(1):

css3的动画帧实现旋转

@keyframes tea_arrow {

0%{transform: rotateZ(180deg);}

25%{transform: rotateZ(135deg);}

50%{transform: rotateZ(90deg);}

75%{transform: rotateZ(45deg);}

100%{transform: rotateZ(0deg);}

}

@keyframes tea_arrow1 {

0%{transform: rotateZ(0deg);}

25%{transform: rotateZ(45deg);}

50%{transform: rotateZ(90deg);}

75%{transform: rotateZ(135deg);}

100%{transform: rotateZ(180deg);}

}

.tea_arrowDown{animation: tea_arrow 0.5s linear;transform-origin:center center;transform: rotateZ(0deg);}

.tea_arrowUp{animation: tea_arrow1 0.5s linear;transform-origin:center center;transform: rotateZ(180deg);}

css(2):

css3过渡属性加旋转属性

.tea_arrowDown{transition: 0.8s;transform-origin:center center;transform: rotateZ(0deg);}

.tea_arrowUp{transition: 0.8s;transform-origin:center center;transform: rotateZ(180deg);}

jQ:

用jq只是判断一下是否包含所发生动画的类

~(function() {

var btn = $(".tea_getBtn");

var aniCon = $(".tea_getDetail");

var arrow = $(".tea_arrow");

btn.on("click",function() {

if(!arrow.hasClass("tea_arrowDown") && !arrow.hasClass("tea_arrowUp") ) {

arrow.addClass("tea_arrowUp");

}else if(arrow.hasClass("tea_arrowUp") ){

arrow.removeClass("tea_arrowUp").addClass("tea_arrowDown");

}else if(arrow.hasClass("tea_arrowDown") ){

arrow.removeClass("tea_arrowDown").addClass("tea_arrowUp");

}

});

})();