求閃動背景圖片

悬赏园豆：50 [已解决问题] 解决于 2013-03-14 08:54

求那位大俠可以幫忙做一個背影動態圖片

類似這個頁面十字標識后一閃一閃那個小圈(要用Google 或火狐瀏覽器才可以看到)

大小36*36

謝謝，一定給高分

photoshop Web标准网站开发

wanghongxing | 初学一级 | 园豆：12
提问于：2013-03-08 17:43

< >

最佳答案

我分析了他的那个网页，这个不是用图片做出来的，而是用CSS中的动画来实现的

下面是html脚本

<div class="tooltip img32" style="top: 61px; left: 656px; z-index: 1;" data-animationtype="ltr-slide" data-round="roundBgW" data-button="moreblack" data-tooltipbg="bgblack"><div class="roundBgW"></div><div class="roundBgWIn"></div><div class="roundBgWInner"></div><div class="button moreblack"></div><div class="descrContainer"><div class="pass-ltr"></div><div class="descr bgblack ltr-before"><div class="xs" style="display: none;">
<p>Left-to-right tooltip containing an image</p>
<img alt="an image" src="./images/Empire-State-Building-small.jpeg">
</div></div></div></div>

下面是css定义

.roundBgW{
border-radius: 30px;
position: absolute;
animation: pulseW 1.5s 1s infinite alternate;
-moz-animation: pulseW 1.5s 1s infinite alternate; /* Firefox */
-webkit-animation: pulseW 1.5s 1s infinite alternate; /* Safari and Chrome */
-o-animation: pulseW 1.5s 1s infinite alternate; /* Opera */
}
.roundBgWIn{
border-radius: 30px;
position: absolute;
top: 4px;
left: 4px;
animation: pulseWIn 1.5s 0.5s infinite alternate;
-moz-animation: pulseWIn 1.5s 0.5s infinite alternate; /* Firefox */
-webkit-animation: pulseWIn 1.5s 0.5s infinite alternate; /* Safari and Chrome */
-o-animation: pulseWIn 1.5s 0.5s infinite alternate; /* Opera */
}
.roundBgWInner{
border-radius: 30px;
position: absolute;
top: 7px;
left: 7px;
animation: pulseWInner 1.5s infinite alternate;
-moz-animation: pulseWInner 1.5s infinite alternate; /* Firefox */
-webkit-animation: pulseWInner 1.5s infinite alternate; /* Safari and Chrome */
-o-animation: pulseWInner 1.5s infinite alternate; /* Opera */
}
@keyframes pulseW
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.2);}
}

@-moz-keyframes pulseW /* Firefox */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.2);}
}

@-webkit-keyframes pulseW /* Safari and Chrome */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.2);}
}

@-o-keyframes pulseW /* Opera */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.2);}
}
@keyframes pulseWIn
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.3);}
}

@-moz-keyframes pulseWIn /* Firefox */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.3);}
}

@-webkit-keyframes pulseWIn /* Safari and Chrome */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.3);}
}

@-o-keyframes pulseWIn /* Opera */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.3);}
}

@keyframes pulseWInner
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.6);}
}

@-moz-keyframes pulseWInner /* Firefox */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.6);}
}

@-webkit-keyframes pulseWInner /* Safari and Chrome */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.6);}
}

@-o-keyframes pulseWInner /* Opera */
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.6);}
}

你可以参考一下

收获园豆：50

陈希章 | 老鸟四级 |园豆：2538 | 2013-03-09 18:54

我把這段代碼運行啦一下，看不到任何效果，如果兄弟方便的話，你把你的文件打包發我一下好嗎?

wanghongxing | 园豆：12 (初学一级) | 2013-03-11 08:22

@wanghongxing: http://ipicture-square.justmybit.com/css/jQuery.iPicture.css 你可以在这个基础上做些研究

陈希章 | 园豆：2538 (老鸟四级) | 2013-03-11 13:48

@陈希章: 這個插件為什么在IE下下運行看不到效果呀

wanghongxing | 园豆：12 (初学一级) | 2013-03-11 14:04

@wanghongxing: 建议你善用方法，例如这个css中提到了animation，那么可以进一步自己研究，搜索得到 http://www.w3schools.com/css3/css3_animations.asp

陈希章 | 园豆：2538 (老鸟四级) | 2013-03-11 14:18

@陈希章:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/* white round bg */
.img32 .roundBgW{
height: 50px;
width: 50px;
left: -9px;
position: absolute;
top: -9px;
}
.img32 .roundBgWIn{
height: 42px;
width: 42px;
position: absolute;
left: -5px;
top: -5px;
}
.img32 .roundBgWInner{
height: 36px;
width: 36px;
position:absolute;
left: -2px;
top: -2px;
}
.roundBgW{
border-radius: 30px;
position: absolute;
animation: pulseW 1.5s 1s infinite alternate;
-moz-animation: pulseW 1.5s 1s infinite alternate; /* Firefox */
-webkit-animation: pulseW 1.5s 1s infinite alternate; /* Safari and Chrome */
-o-animation: pulseW 1.5s 1s infinite alternate; /* Opera */
}
.roundBgWIn{
border-radius: 30px;
position: absolute;
top: 4px;
left: 4px;
animation: pulseWIn 1.5s 0.5s infinite alternate;
-moz-animation: pulseWIn 1.5s 0.5s infinite alternate; /* Firefox */
-webkit-animation: pulseWIn 1.5s 0.5s infinite alternate; /* Safari and Chrome */
-o-animation: pulseWIn 1.5s 0.5s infinite alternate; /* Opera */
}
.roundBgWInner{
border-radius: 30px;
position: absolute;
top: 7px;
left: 7px;
animation: pulseWInner 1.5s infinite alternate;
-moz-animation: pulseWInner 1.5s infinite alternate; /* Firefox */
-webkit-animation: pulseWInner 1.5s infinite alternate; /* Safari and Chrome */
-o-animation: pulseWInner 1.5s infinite alternate; /* Opera */
}
@keyframes pulseW
{
from {background: rgba(255,255,255, 0);}
to {background: rgba(255,255,255, 0.2);}
}