出处:http://www.cnblogs.com/starof/p/5443445.html
一、最终效果
需求:gift图片的小动画每隔2s执行一次。
需求就一句话,我们看一下实现过程。
二、实现过程
1、网页结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
display: inline-block;
background-color: #cc2222;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: 10px 12px;
width: 100px;
position: relative;
}
.ico {
position: absolute;
width: 14px;
height: 16px;
background: url(images/ico.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 4px;
right: 27px;
}
</style>
</head>
<body>
<nav>
<a href="javascript:;" class="box">
一元夺宝
<div class="ico"></div>
</a>
</nav>
</body>
</html>
2、原始动画
原始动画效果为:鼠标hover上去出现动画。
动画样式如下:
/*动画*/
.ico:hover{
-webkit-animation: Tada 1s both