以下是 CSS3实现旋转LOGO 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<title>CSS3实现旋转LOGO</title>
<script>
$(function() {
var rotate = function(logo, angle) {
logo.css({
"transform" : "rotate("+angle+"deg)"
});
}
$(window).scroll(function(){
rotate($(".zhuan"), $(window).scrollTop()*0.8);
})
});
</script>
<style type="text/css">
body {background:#b99a7e;padding:0;font-size:14px;}
.container {height:5000px;}
.logo {
position:fixed;
top:50%;
left:50%;
margin:-76px 0 0 -76px;
background:url(images/logo.png) no-repeat 0 0
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<div class="zhuan">
<img src="images/logo-outside.png" width="151" height="151">
</div>
</div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
