半年没更新自己的网站了。
估计这次更新将会影响鸡西网站设计等相关词的排名,但浮动不会太大,也会很快恢复。
教程开始!
要实现Logo的动画效果,这里就简单做个演示。东西相对较简单,所以不要认为你搞不定它。
下面是演示的案例代码,你也可以
点击查看动画效果
<style>
.imlogo{
display: block;
width: 160px;
height: 80px;
background: #0072ff url(http://cdn.7vnet.com/wp-content/uploads/2018/09/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格式,即可实现代码改变颜色)。