.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. 【转】寻找最好的笔记软件:三强篇(EverNote、Mybase、Surfulater) (v1.0) (

    原文网址:http://blog.sina.com.cn/s/blog_46dac66f01000b57.html 寻找最好的笔记软件:三强篇(EverNote.Mybase.Surfulater) ...

  2. 嵌入式设备web服务器比较

    目录(?)[-] Boa Thttpd Mini_httpd Shttpd Lighttpd Goahead AppWeb Apache 开发语言和开发工具 结论 备注   现在在嵌入式设备中所使用的 ...

  3. 【链表】【模拟】Codeforces 706E Working routine

    题目链接: http://codeforces.com/problemset/problem/706/E 题目大意: 给一个N*M的矩阵,Q个操作,每次把两个同样大小的子矩阵交换,子矩阵左上角坐标分别 ...

  4. ACM第六周竞赛题目——A LightOJ 1317

    A - A Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit Status P ...

  5. 自定义WCF的配置文件

    原文地址:http://www.cnblogs.com/shanyou/archive/2008/12/02/1346298.html WCF的承载既可以通过编码实现,也能够通过配置实现.而且使用配置 ...

  6. cobbler客户端重装系统

    已有操作系统的主机通过koan从Cobbler服务器重装系统 1,安装epel rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel- ...

  7. ASIHttpRequest或者SDWebImage给UIImageView加载图片的逻辑是什么样子的

    非常非常喜欢SDWebImage,就算后来AF也做了图片缓存,我也还是一直使用.图片缓存真的是一件令人头疼的事,但是SDWebImage封装了一切,你所需要的只是简单的set一个URL:1.设置一个展 ...

  8. XML相关概念

    XML:可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. XSL:XSL = XML 样式表.XSL 之于XML,就像CSS之于HTML.它是指可扩展样式语言 ...

  9. Linux下设置文件权限

    文件权限示意图: 第一步:在终端创建用户 增加用户 useradd 用户名 设置密码 passwd 用户名 通过上述两条命令创建a1,a2两个用户. 第二步:在根目录使用管理员账号创建一个文件 在使用 ...

  10. bind()

    首先是改变this指向问题 var altwrite = document.write; altwrite("hello"); 上面的程序运行,会报错:Uncaught TypeE ...