頁面的按鈕3d效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>秒味課堂視頻頁面的按鈕3d效果</title>
<!--小功能就在這裏寫css好了-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0}
li{list-style: none}
a{text-decoration: none;color: #fff;text-align: center}
body{
background: #392C5C;
}
.bar{
position: relative;
float: left;
margin-top: 20px;
width: 780px;
height: 520px;
}
.bar li{
position: absolute;
width: 250px;
height: 250px;
top:5px;
left: 5px;
line-height: 250px;
background: #fbc00d;
box-shadow: 2px 2px 6px 0 rgba(0,0,0,.6);
transition: .5s;
}
.bar .li2{
left: 260px;
background: #62C464;
}
.bar .li3{
left: 520px;
background: #E04571;
}
.bar .li4{
top:260px;
background: #2CB3CB;
}
.bar .li5{
top:260px;
left: 260px;
background: #9965E2;
}
.bar .li6{
top:260px;
left: 520px;
background: #6067D5;
}
.bar li:hover{
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="bar">
<ul>
<li class="li1"><a href="#"><h3>肖晗博客</h3></a></li>
<li class="li2"><a href="#"><h3>肖晗博客</h3></a></li>
<li class="li3"><a href="#"><h3>肖晗博客</h3></a></li>
<li class="li4"><a href="#"><h3>肖晗博客</h3></a></li>
<li class="li5"><a href="#"><h3>肖晗博客</h3></a></li>
<li class="li6"><a href="#"><h3>肖晗博客</h3></a></li>
</ul>
</div>
<script>
;(function($) {
$.fn.bar = function(){
return this.each(function(){
var $ele = $(this);/*這裏的this指向DOM*/
barM($ele);
});
};
function barM($ele){
var startX = 0;
var startY = 0;
$ele.mouseenter(function(ex){
var offset = $ele.offset();//文檔的偏移（位置）
startX = ex.pageX - offset.left; // 鼠標在容器內 x 坐標,pageX鼠標指針的位置，相對於文檔的左邊緣
startY = ex.pageY - offset.top; // 鼠標在容器內 y 坐標
console.log( offset.left);
console.log( ex.pageX);
$ele.css({‘transform‘:‘scale(1.1,1.1) rotateX(‘+(startY-$ele.height()/2)/-5+‘deg) rotateY(‘+(startX-$ele.width()/2)/5+‘deg) translateZ(50px)‘});
});
$ele.mousemove(function(ex){
var offset = $ele.offset();//文檔的偏移（位置）
startX = ex.pageX - offset.left; // 鼠標在容器內 x 坐標,pageX鼠標指針的位置，相對於文檔的左邊緣
startY = ex.pageY - offset.top; // 鼠標在容器內 y 坐標
$ele.css({‘transition‘:‘0s‘,‘transform‘:‘scale(1.1,1.1) rotateX(‘+(startY-$ele.height()/2)/-5+‘deg) rotateY(‘+(startX-$ele.width()/2)/5+‘deg) translateZ(50px)‘});
});
$ele.mouseleave(function(ex){
$ele.css({‘transition‘:‘.5s‘,‘transform‘:‘scale(1,1) rotateX(0deg) rotateY(0deg)‘});
});
}
})(jQuery);
$(".bar li").bar();
</script>
</body>
</html>
頁面的按鈕3d效果