七网科技
本页定位
在线咨询

观察期 CSS3 实现Logo动画

假装绅士🎩4个月前1086A+A-

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

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

教程开始!

要实现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格式,即可实现代码改变颜色)。

相关推荐
全部评论: 0
登录没有账号 切换注册

忘记密码 ?

注册已有账号 切换登录