首页 简单CSS3技巧实现的Logo动画

简单CSS3技巧实现的Logo动画

chenmo 2020-6-11 0 204

之前不少人提过说要实现像阿里百秀Logo那样的动画效果,为了满足广大用户的需求,这里就简单做个演示。东西相对较简单,所以不要认为你搞不定它。

下面是案例代码

<style>.imlogo{
	display: block;
	width: 160px;
	height: 80px;
	background: #FF5E52 url(https://themebetter.com/uploads/2015/01/logo2.png) center 22px 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)背景图的坐标(22px和-48px),你就能实现自己的动画了,如果你很懒,那就做个119*100px的logo即可,像下面这样的一张图(背景做成透明的,png格式,即可实现代码改变颜色)。

在主题的style.css最后加上,再做个原来Logo高度2倍的图先替换,然后更改其中的-48为你的位置即可,不会计算的话直接多试几个就能知道哪个合适了。

本文属原创,转载请注明原文:https://themebetter.com/css3-logo.html


#CSS##Logo##动画#

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
作者: chenmo 本文最后编辑于2020-6-11 03:36:42
chenmo

一个爱玩电脑,却又不沉迷游戏;喜欢网页设计,却又能力不足。喜欢网上到处灌,关注科技类新闻,寻搜有价值的网站。喜欢美剧,又喜爱电影,可以很宅,很宅,却又爱好户外骑行运动,喜欢接近大自然的心声。

作者的微博

发表评论: