logo自动旋转 html,CSS3创作有意思的旋转LOGO

CSS3创作有意思的旋转LOGO

Sponsor

在网页设计个哪里都能发挥创意，包括LOGO也是哦，前几天看到个tumblr的博客(staff.tumblr.com/)设计，觉得这个博客的logo挺有意思的，当然通过举动条浏览网页内容的时候，LOGO旁边的英文字会根据滑动条滚动而旋转。接下来达人也尝试设计一个类似的LOGO，并实现和staff博客一样的效果。

PS: 实现方法是使用CSS3 transform的rotate旋转属性，所以浏览器要兼容CSS3这个属性才能生效。

LOGO设计

LOGO图片需要分开两张，一张是用于旋转，一张是静态不动的。如下图：

接下来，我们在将这个LOGO应用在网页上，下面是对应这代码

HTML代码

CSS样式

.logo {

position:fixed;

top:50%;

left:50%;

margin:-76px 0 0 -76px;

background:url(img/logo.png) no-repeat 0 0

}

引入jQuery库代码

jQuery代码

用于判断和控制LOGO旋转，代码很简短的，如果想修改速度，请修改*0.2的数值即可。

$(function() {

var rotate = function(logo, angle) {

logo.css({

"transform" : "rotate("+angle+"deg)"

});

}

$(window).scroll(function(){

rotate($(".zhuan"), $(window).scrollTop()*0.2);

})

});

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

alicechew -

2015 年 05 月 16 日 下午 7:02

请问下为什么我用chrome看还是不动的?chrome应该能兼容呀

爱在发烧 -

2015 年 07 月 12 日 下午 3:15

谷歌的jquery失效，所以没效果

颜磊 -

2013 年 08 月 22 日 下午 4:32

这个效果不错

琹①蕊╃嚮榮 -

2013 年 07 月 30 日 上午 11:08

求解

琹①蕊╃嚮榮 -

2013 年 07 月 30 日 上午 11:08

中间那个LOGO怎么放进去呢?外框是动了

nxy -

2013 年 07 月 25 日 上午 10:53

怎么可以看到效果，求告知《谢谢

nxy -

2013 年 08 月 05 日 下午 9:59

好的，谢谢

青衿 -

2013 年 07 月 23 日 下午 2:22

这个效果好，可以用在好多细节地方！

老赵_茶馆 -

2013 年 07 月 23 日 上午 8:43

？怎么我看demo是不动的？

saiki -

2013 年 09 月 12 日 上午 11:20

浏览器不支持

mqie -

2013 年 07 月 22 日 下午 10:40

介个非常棒

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站