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群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。