html:

<aside class="tea_getBtn">
<div class="w">
<span class="displayB fl font_1">得茶说明</span>
<span class="displayB fr tea_arrow"><img class="mI_img1" src="img/tea/tea_arrowDown.png" alt=""></span>
</div>
</aside>

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");
}
});
})();

css3+jq--小箭头旋转180度案例的更多相关文章

  1. Recovery和Charger模式下屏幕旋转180度

    转自:http://www.etwiki.cn/android/1267.html 如何让Recovery (系统固件升级),charger(关机充电动画)时屏幕旋转180度 解决方法: 1.在boo ...

  2. Recovery和Charger模式下屏幕旋转180度[转]

    如何让Recovery (系统固件升级),charger(关机充电动画)时屏幕旋转180度 解决方法: 1.在bootable\recovery\minui\Graphics.c 文件找到gr_fli ...

  3. css3实现小箭头,各种图形

    转:http://blog.csdn.net/tangtang5963/article/details/51490107 https://segmentfault.com/a/119000000278 ...

  4. Lodop打印旋转180度 倒着打

    方法1:打印出来后,直接把纸张倒过来.如果本身是白纸,打印机出纸内容是倒着的,可以打出来后手动倒着把纸张正过来.如果本身不是白纸,需要打印的纸张上有背景,调整进纸方向.(如果是卷纸,卷纸背景是反的,查 ...

  5. CSS3轻松实现彩色旋转六面体动画

    一.效果预览: 二.基本思路: 1.首先这个一个自动触发的动画,因此应使用animation设计,包括自动组装和组装完成后自动旋转的过程: 2.当鼠标放上去的时候六个面及上面的字体均变色,应在六个面设 ...

  6. WPF案例(二)模拟Apple OS 界面前后180度反转

    原文:WPF案例(二)模拟Apple OS 界面前后180度反转 我们在设计应用程序界面的时候,为了充分利用界面空间,住住需要灵活的界面布局方式,比如可以在界面正面空间上定义一个Chart,背面空间上 ...

  7. 利用纯粹的CSS3替代小图标---向右箭头

    1.向右的箭头>  . 看到很多网站里面向右的箭头都是图片代替的,但是为了网站的性能,我们一般的原则是能够避免使用图片的尽量不用图片   比如看下携程个人中心首页面,向右的箭头 其实现思路是这样 ...

  8. Unity检测面板旋转值超过180度成负数的离奇bug

    问题描述: 无意中在检视面板上对游戏物体的tansform进行旋转,结果发现旋转超过180度成负数的离奇bug 解决方案: 创建个新的unity工程,进行如上操作,一切正常…… 怀疑问题根源是配置出现 ...

  9. 使用css3实现小菊花加载效果

    使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...

随机推荐

  1. dedecms实现表单提交数据到指定的邮箱

    1.http://blog.csdn.net/webnoties/article/details/17219219 2.http://www.jz96.com/451.html 3.https://m ...

  2. c#做对比软件

    一些 HTML内容比较/文本差异比较 开源代码 1. DiffPlex - a .NET Diff Generator    http://diffplex.codeplex.com/SourceCo ...

  3. 初入AngularJS

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. Ang ...

  4. MySQL好弱智的一个错误

    在sql中执行select是可以查询 但是在linux命令行下执行就报错 ERROR 1059 (42000): Identifier name 'use db_goforit_stati;selec ...

  5. tab.py

    vim tab.py #!/usr/bin/env python # #Tab import sys import readline import rlcompleter import atexit ...

  6. whoami---打印当前有效的用户名称

    whoami命令用于打印当前有效的用户名称,相当于执行id -un命令. 语法 whoami(选项) 选项 --help:在线帮助: --version:显示版本信息. 实例 [root@localh ...

  7. Httphelper头信息(ContentType)默认为text/html无懈可击

    Httphelper头信息(ContentType)默认为text/html无懈可击转 http://www.sufeinet.com/thread-8623-1-1.html 我发现最近有几个网友提 ...

  8. Flexible implementation of a system management mode (SMM) in a processor

    A system management mode (SMM) of operating a processor includes only a basic set of hardwired hooks ...

  9. codevs——T1337 银行里的迷宫

     时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 楚楚每一次都在你的帮助下过了一关又一关(比如他开宴会). ...

  10. zookeeper 性能测试

    zookeeper压力测试:性能对比(3个节点,5个节点,7个节点 创建节点.删除节点.设置节点数据.读取节点数据性能及并发性能) 测试结果如下: 五次测试三节点结果: 创建100W节点用时:15.0 ...