html5实现图片转圈的动画效果——让页面动起来
互联网 & 发布时间： 11:30:58 & 作者：佚名 &
这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下
1.先瞧瞧效果：
2.代码是这样的：
&img src=&images/circle.png& alt=&& id=&circle&/&
@mixin ani-btnRotate{
@keyframes btnRotate{
from{transform: rotateZ(0);}
to{transform: rotateZ(360deg);}
@include ani-btnR
left: 50%;
width: REM(338);
margin-top: REM(200);
margin-left: REM(-338/2);
transform-origin:
animation: btnRotate 1s 1
用到的图片是这个：（就是白色转动的那个图片）
以上所述是小编给大家介绍的html5实现图片转圈的动画效果&&让页面动起来，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
大家感兴趣的内容
12345678910
最近更新的内容简单窗帘拉开效果网页开场动画代码
相关最新源码
简单窗帘拉开效果网页开场动画代码基于jquery-1.8.2.js制作，模拟窗帘左右拉开动画效果，适用于网站首页或登录页面使用。
&&&&&&&&&&&&&&&&&&&&&&&&&
源码下载地址在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
html的css样式中页面滚动到指定位置时候，animation才触发，如何写？现在我的animation当页面加载时候，就开始执行动画了，等我页面滚到指定位置时候，动画老早时间过去了。。。
在angular中使用？控制台跳出错误：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
通过检测scrollTop
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
检测scrolltop 然后加上对应animation的 class
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以参考这个：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。当前位置 :
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天一、最终效果
需求：gift图片的小动画每隔2s执行一次。
需求就一句话，我们看一下实现过程。
二、实现过程
1、网页结构
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
display: inline-block;
background-color: #cc2222;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: 10px 12px;
width: 100px;
position: relative;
position: absolute;
width: 14px;
height: 16px;
background: url(images/ico.png) no-repeat center;
background-size: 100%;
position: absolute;
right: 27px;
&a href="javascript:;" class="box"&
&div class="ico"&&/div&
2、原始动画
原始动画效果为：鼠标hover上去出现动画。
动画样式如下：
.ico:hover{
-webkit-animation: Tada 1s both;
-moz-animation: Tada 1s both;
-ms-animation: Tada 1s both;
animation: Tada 1s both
/*浏览器兼容性部分略过*/
@keyframes Tada {
transform: scale(1);
transform: scale(1)
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
30%,50%,70%,90% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
40%,60%,80% {
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
效果：鼠标hover上去gift图片会动一动。
3、实现变化后的需求
需求变动，要求不再是hover上去展示动画，而是每隔2s展示一次动画。
思路：不需要hover上去出现动画，就把hover去掉，每隔2s显示一次动画，很容易想到延迟2s,然后动画一直执行。
此时相关样式变成：
-webkit-animation: Tada 1s
2s both infinite;
-moz-animation: Tada 1s 2s both infinite;
-ms-animation: Tada 1s 2s both infinite;
animation: Tada 1s 2s both infinite;
但是显示的效果是：页面加载第一次出现动画会延迟2s，后面的动画将不再有延迟。如下，这是不符合需求的。
为了看出效果，下图为延迟6s的效果。
此时换种思路，不要延迟执行动画，而是动画的效果本身就是前2s元素不动，后1s是元素动，然后一直循环执行。 这样在视觉上就会看起来是延迟2s执行1s动画。
计算一下，原来的百分比节点变成了多少。
将动画总时长变成3s，用计算出的百分比替换原来的百分比，代码如下：
-webkit-animation: Tada 3s both infinite;
-moz-animation: Tada 3s both infinite;
-ms-animation: Tada 3s both infinite;
animation: Tada 3s both infinite;
@keyframes Tada {
transform: scale(1);
transform: scale(1)
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97%
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
效果就是我们期望的了。
完整代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&demo of starof&/title&
display: inline-block;
background-color: #cc2222;
text-decoration: none;
color: #fff;
font-size: 14px;
padding: 10px 12px;
width: 100px;
position: relative;
position: absolute;
width: 14px;
height: 16px;
background: url(images/ico.png) no-repeat center;
background-size: 100%;
position: absolute;
right: 27px;
-webkit-animation: Tada 3s both infinite;
-moz-animation: Tada 3s both infinite;
-ms-animation: Tada 3s both infinite;
animation: Tada 3s both infinite;
@-webkit-keyframes Tada {
-webkit-transform: scale(1);
transform: scale(1)
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
@-moz-keyframes Tada {
-moz-transform: scale(1);
transform: scale(1)
-moz-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97% {
-moz-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93%{
-moz-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
@-ms-keyframes Tada {
-ms-transform: scale(1);
transform: scale(1)
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97% {
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93% {
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
@keyframes Tada {
transform: scale(1);
transform: scale(1)
transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg)
77%,83%,90%,97%
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
80%,87%,93%{
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
&a href="javascript:;" class="box"&
&div class="ico"&&/div&
本文只是介绍一种思路，关于动画各个参数详情可参考：
本文作者,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。
阅读(...) 评论()}