Welcome, Old Sport!

CSS3地图焦点动画

by ilikecss ON 2013/04/18 13527

CSS3地图焦点动画话说这礼拜(4.21-4.26)我要去日本研修了(研修的照片日后会在博客公布)临走前先来篇久违的教程,走起。今天要介绍的是地图显示你所在地焦点的动画效果,制作非常简单现在只需要CSS就可以实现了,下面一起来看下代码吧!

HTML都是一些修饰作用,这款效果主要是CSS的制作。地图需要大家去自己制作,谷歌百度随便你喜欢,或者一些国外特别的svg地图非常绚丽,demo里我是用的谷歌地图。

Step1. HTML代码

<div id="Tracer">
        <div class="ring"></div>
        <div class="ring"></div>
</div>

Step2. CSS样式

#Tracer{
	position: absolute;
	left: 73%;
	top: 67%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background: #fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
}
#Tracer::after{
	content: "";
	position: absolute;
	height: 8px;
	width: 8px;
	left: 4px;
	top: 4px;
	background: #dcc6de;
	border-radius: 4px;
}
#Tracer .ring{
	position: absolute;
	width: 40px;
	height: 40px;
	border: 5px solid #FFFFFF;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	opacity: 0;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
	-webkit-animation: trace 1s infinite linear;
	-moz-animation: trace 1s infinite linear;
	-ms-animation: trace 1s infinite linear;
	-o-animation: trace 1s infinite linear;
	animation: trace 1s infinite linear;
}
#Tracer .ring:last-of-type{
	-webkit-animation-delay: .5s;
	-moz-animation-delay: .5s;
	-ms-animation-delay: .5s;
	-o-animation-delay: .5s;
	animation-delay: .5s;
}
@-webkit-keyframes trace{
	0%{
		-webkit-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-webkit-transform: scale(1);
		opacity: 0;
	}
}

@-moz-keyframes trace{
	0%{
		-moz-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-moz-transform: scale(1);
		opacity: 0;
	}
}
@-ms-keyframes trace{
	0%{
		-ms-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-ms-transform: scale(1);
		opacity: 0;
	}
}
@-o-keyframes trace{
	0%{
		-o-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-o-transform: scale(1);
		opacity: 0;
	}
}
@keyframes trace{
	0%{
		transform: scale(0.1);
		opacity: 1;
	}
	100%{
		transform: scale(1);
		opacity: 0;
	}
}
19条评论
  1. #1

    tinyhill说道:

    非常赞,用到地震提示更好 :smile:

  2. #2

    金刚禅狮子吼说道:

    要去日本了啊。。。
    替我给苍井老师带好!

  3. #3

    莉嫣小铺说道:

    :razz: 俺也去弄个小地图把自己标记一下。

  4. #4

    yxiao说道:

    厉害哦。css很强大。

  5. #5

    意大利面说道:

    不错 偷学一个~

  6. #6

    Summer说道:

    期待你这次尼轰之行的照片呀 :roll:

    • 哈哈,只是这次时间实在太少了,自由活动时间只有半天,残念! :???:

  7. #7

    阿邙说道:

    GR点不进来。。  

  8. #8

    Arch!Tech说道:

    好看~

  9. #9

    不亦乐乎说道:

    你这个文中贴代码用的是啥办法,没见你转换啊啊怎么就不自动编译呢?

  10. #10

    不亦乐乎说道:

    我错了,还是转化了。 :smile:

  11. #11

    好基地说道:

    就光是一个小焦点就要写这么多css代码 那如果真的需要这种效果 做一个gif图片岂不是更方便




TOP