.head{

position: absolute;

-webkit-animation: shake 1s infinite;

-webkit-transform-origin: center bottom;

}

@-webkit-keyframes shake{

0% {

-webkit-transform:rotate(-5deg);

}

50% {

-webkit-transform:rotate(5deg);

}

100% {

-webkit-transform:rotate(-5deg);

}

}

CSS3 @keyframes 用法:
http://www.w3school.com.cn/cssref/pr_keyframes.asp

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

<style>

.head{

  position: absolute;

  -webkit-animation: shake 1s infinite;

  -webkit-transform-origin: center bottom;

}

@-webkit-keyframes shake{

  0% {

    -webkit-transform:rotate(-5deg);

  }

  50% {

    -webkit-transform:rotate(5deg);

  }

  100% {

    -webkit-transform:rotate(-5deg);

  }

}}

}

</style>

</head>

<body>

<div class="head"><img src="http://img.xiami.net/res/loop/img/avatar/head_back_girl.png" class="head_img"></div>

</body>

</html>

在线DEMO: http://jsbin.com/vaqicejapa

虾米loop 摇头代码的更多相关文章

  1. xilinx DMA IP核(一) —— loop测试 代码注释

    本篇笔记中的代码来自:米联科技的教程“第三季第一篇的DMA_LOOP环路测试” 硬件的连接如下图所示: 图:DMA Loop Block Design 橘色的线就是DMA加FIFO组成的一个LOOP循 ...

  2. 编译器工程师眼中的好代码：Loop Interchange

    摘要:本文将以Loop Interchange的场景为例,讲述在编写代码时可以拿到更优性能的书写方式. 本文分享自华为云社区<编译器工程师眼中的好代码(1):Loop Interchange&g ...

  3. Run Loop详解

    Run loops是线程的基础架构部分.一个run loop就是一个事件处理循环,用来不停的调配工作以及处理输入事件.使用run loop的目的是使你的线程在有工作的时候工作,没有的时候休眠. Run ...

  4. (jsp/html)网页上嵌入播放器(常用播放器代码整理) http://www.jb51.net/article/37267.htm

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助   这个其实很简单,只要在HTML上添加以上代码就O ...

  5. Game Loop的几种实现方式

    http://www.bennychen.cn/2011/06/game-loop-model/ —————————————————————————————— 写这篇博客的目的是为了对game loo ...

  6. linux shell scripts：Syntax error: Bad for loop variable

    执行脚本报错 #!/bin/bash s=0 for (( i=1; i<=100; i++ )) do s=$(( $s + $i )) done echo $s sh add.sh 报错: ...

  7. 事件循环 event loop 究竟是什么

    事件循环 event loop 究竟是什么 一些概念 浏览器运行时是多进程,从任务管理器或者活动监视器上可以验证. 打开新标签页和增加一个插件都会增加一个进程,如下图:  浏览器渲染进程是多线程,包 ...

  8. oracle 存储过程

    来自:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 I ...

  9. Oracle存储过程语法

    原文链接:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程  1 CREATE OR REPLACE PROCEDURE 存储过程名  ...

随机推荐

  1. HDU 5396 Expression(DP+组合数)（详解）

    题目大意: 给你一个n然后是n个数. 然后是n-1个操作符,操作符是插入在两个数字之间的. 由于你不同的运算顺序,会产生不同的结果. 比如: 1 + 1 * 2 有两种  (1+1)*2   或者   ...

  2. MFC重绘函数：InvalidateRect(), Invalidate()和UpdateWindow()

    1. 重绘消息 当需要更新或者重绘窗口时,一般系统会发出两个消息WM_PAINT(通知客户区有变化)和WM_NCPAINT(通知非客户区有变化) WM_NCPAINT系统会自己搞定 WM_PAINT消 ...

  3. 动态树(Link Cut Tree) ：SPOJ 375 Query on a tree

    QTREE - Query on a tree #number-theory You are given a tree (an acyclic undirected connected graph) ...

  4. Course Schedule ——LeetCode

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  5. Introduction to Glide, Image Loader Library for Android, recommended by Google

    In the passed Google Developer Summit Thailand, Google introduced us an Image Loader Library for And ...

  6. C++引用变量学习

    版权所有,转载请注明来源 (1)reference variable(rv) 主要用处是作为方程的形式参数,使用rv 可以直接对原数据进行操作而不是该数据的拷贝,节省了时间和空间,尤其是对于结构体以及 ...

  7. hdu 4619 二分图最大匹配 ——最大独立集

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4619 #include <cstdio> #include <cmath> # ...

  8. 也谈BIO | NIO | AIO （Java版--转）

    关于BIO | NIO | AIO的讨论一直存在,有时候也很容易让人混淆,就我的理解,给出一个解释: BIO | NIO | AIO,本身的描述都是在Java语言的基础上的.而描述IO,我们需要从两个 ...

  9. AGG 之贝塞尔插值

    原文: http://liyiwen.iteye.com/blog/705489 之前 comp.graphic.algorithms 上有一个讨论,是关于怎么样使用曲线对多边形进行插值处理,使得最终 ...

  10. AngularJS $on $broadcast $emit

    如何在作用域之间通信呢?    1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信.    2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的 ...