Welcome, Old Sport!

超简单LOGO特效制作

by ilikecss ON 2012/10/26 6446

超简单LOGO特效制作LOGO平淡无忌?想不出如何修饰?没关系,今天这里就教大家制作一款非常简单的LOGO特效,基于CSS3的动画效果,特别实用。此款效果需要配置图片为基础,我已经将PSD文件附件了,大家可以下载后自己修改文字。

Step1. 创建HTML

<h1><a href="/">Sunflowa Media <em>Web Design,Tutorials,Resources,WordPress,Inspiration</em></a><span></span></h1> 

Step2. 创建CSS

h1{
	width:285px; 
	height:50px;
	margin: 250px auto;
	padding:0;
	background:url(../img/logo.png) no-repeat right top;
}
#header h1 a, #header h1 span {
	width:285px;
	height:50px;
	text-indent:-999999px;
	float:left;
	position:absolute;
	z-index:99999;
}
#header h1 span {
	visibility:hidden;
	opacity:1;
	background-position:left top;
	position:absolute;
	z-index:99;
	background:url(../img/logo.png) no-repeat right top;
	-webkit-transition:all 200ms ease-in-out;
	-moz-transition:all 200ms ease-in-out;
	-o-transition:all 200ms ease-in-out;
	transition:all 200ms ease-in-out;
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}
#header h1:hover span {
	-moz-transform:scale(1);
	-webkit-transform:scale(1.2);
	-o-transform:scale(1.2);
	-ms-transform:scale(1.2);
	transform:scale(1.2);
	opacity:0;
	visibility:
	visible;
	z-index:1;
}
6条评论
  1. #1

    Kayo说道:

    灰常强大的 CSS3 应用,得测试一下!

  2. #2

    体验盒子说道:

    效果不错,只是这个没仔细去看

  3. #3

    体验盒子说道:

    《span》《/span》 这一对括号被过滤掉了,所以换《》

  4. 不错 :razz: :razz: :evil: :evil:




TOP