CSS图书馆 » HTML & CSS » CSS3创作有意思的旋转LOGO

CSS3创作有意思的旋转LOGO

发表于: HTML & CSS. 评论 (11)
Sponsor

rotate-logo

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

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

LOGO设计

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

rotate-logo2

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

HTML代码

<div class="logo">
<div class="zhuan">
<img src="img/logo-outside.png" width="151" height="151">
</div>
</div>

CSS样式

.logo {
position:fixed;
top:50%;
left:50%;
margin:-76px 0 0 -76px;
background:url(img/logo.png) no-repeat 0 0
}

引入jQuery库代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

jQuery代码

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

<script>
$(function() {

var rotate = function(logo, angle) {
logo.css({
"transform" : "rotate("+angle+"deg)"
});
}

$(window).scroll(function(){
rotate($(".zhuan"), $(window).scrollTop()*0.2);
})

});
</script>

查看DEMO →

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论11 Responses to “CSS3创作有意思的旋转LOGO”

  1. alicechew - 回复

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

    • 爱在发烧 -

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

  2. 颜磊 - 回复

    这个效果不错

  3. 琹①蕊╃嚮榮 - 回复

    求解

  4. 琹①蕊╃嚮榮 - 回复

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

  5. nxy - 回复

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

    • nxy -

      好的,谢谢

  6. 青衿 - 回复

    这个效果好,可以用在好多细节地方!

  7. 老赵_茶馆 - 回复

    ?怎么我看demo是不动的?

    • saiki -

      浏览器不支持

  8. mqie - 回复

    介个非常棒


{ 发表评论 }