<!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>