鸡西网—微信标志
  • 鸡西网站制作
  • 鸡西网客服热线已更改为”400-0467-004“,请广大客户周知。
  • 鸡西网站设计为您提供免费技术问答.如有您有计算机的相关问题欢迎前来咨询!
  • 敢不敢在鸡西网High一下
  • 网站地图

鸡西网站设计 观察期 CSS3实现Logo动画

Html&Css Danny.✔ 1176浏览 0评论 百度收否

半年没更新自己的网站了。

估计这次更新将会影响鸡西网站设计等相关词的排名,但浮动不会太大,也会很快恢复。

教程开始!

要实现Logo的动画效果,这里就简单做个演示。东西相对较简单,所以不要认为你搞不定它。

下面是演示的案例代码,你也可以点击查看动画效果

<style>
.imlogo{
	display: block;
	width: 160px;
	height: 80px;
	background: #0072ff url(http://www.7vnet.com/wp-content/uploads/2015/06/guanchaqi-01.png) center 30px no-repeat;
	-webkit-transition: background-position linear .2s;
	-moz-transition: background-position linear .2s;
	transition: background-position linear .2s;
}
.imlogo:hover{
	background-position: center -48px;
}
</style>

<a class="imlogo" href="#"></a>

其实你只需要改变其中的图片地址、Logo区域大小(160px和80px)背景图的坐标(30px和-48px),你就能实现自己的动画了,如果你很懒,那就做个119*100px的logo即可,像下面这样的一张图(背景做成透明的,png格式,即可实现代码改变颜色)。

转载请注明:七网科技 » 鸡西网站设计 观察期 CSS3实现Logo动画

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址