CSS3创作有意思的旋转LOGO

Sponsor

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

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

LOGO设计

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

接下来，我们在将这个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 →

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。