.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. 【HDOJ】2645 find the nearest station

    裸BFS. /* 2645 */ #include <iostream> #include <queue> #include <cstdio> #include & ...

  2. sql按照in中的顺序进行排序 mysql

    经测试以下三种情况,都可以. SELECT a.id,a.name as goods_name,a.logoimg,b.name as store_name FROM sh_goods a LEFT ...

  3. 【模拟】NEERC15 E Easy Problemset (2015-2016 ACM-ICPC)(Codeforces GYM 100851)

    题目链接: http://codeforces.com/gym/100851 题目大意: N个人,每个人有pi个物品,每个物品价值为0~49.每次从1~n顺序选当前这个人的物品,如果这个物品的价值&g ...

  4. 如何在不影响数据库的正常使用的情况下得到数据的完整.mdf和.ldf文

    一:完整备份数据库 二:还原数据库 四:分离数据库即可得到.mdf和.ldf文件

  5. HDOJ(HDU) 2161 Primes(素数打表)

    Problem Description Write a program to read in a list of integers and determine whether or not each ...

  6. zoj 2706 线段树

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1706 trick:关于正数和负数的整除问题,正数整除是自动向下取整的 ...

  7. Rules

    我们之前处理异常的时候用到过Rules,当然还有很多其他规则.Rules允许弹性的添加或者重定义测试方法的行为.测试者可以重复使用或者扩展下面的某一个Rules,也可以写一个属于自己的规则. 这里先展 ...

  8. 低版本Xcode 出现could not find developer disk image问题

    解决Xcode在ipad/iphone9.2系统真机测试时出现could not find developer disk image问题,只要拷贝这个文件(链接: http://pan.baidu.c ...

  9. XPath总结（转）

    XPath简介 XPath是W3C的一个标准.它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计.目前有XPath1.0和XPath2.0两个版本.其中Xpath1.0是199 ...

  10. Struts2学习笔记之s:select标签

    貌似Struts2 标签都快忘光了  今天先来一发struts2的select标签: 首先从简到难,静态赋值: 1 <s:select name="user.sex" lis ...