[转载]锤子官网的 banner 的 3D 悬浮效果

css 代码

*{box-sizing: border-box;}
div#test{width: 100%;height: 500px;background: white;padding: 100px 0; margin: 100px auto;border: 1px solid #ddd;perspective: 1000px;
}#banner{height: 300px;width: 400px;margin: 0 auto;background:  #37D7B2;transition: transform 0.1s;box-shadow: 0 0 15px rgba(0,0,0,0.25);text-align: center;line-height: 300px;font-size: 50px;color: #fff;
}body{background: white;padding: 20px;
}

html代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div id="test"><div id="banner" >banner</div></div>
</body>
</html>

js代码

$('#test').on('mousemove', function(e){var offset = $('#test').offset()var x = e.pageX - offset.leftvar y = e.pageY - offset.topvar centerX = $('#test').outerWidth() /2var centerY = $('#test').outerHeight() /2 var deltaX = x - centerXvar deltaY = y - centerYvar percentX = deltaX / centerXvar percentY = deltaY / centerYvar deg = 10$('#banner').css({transform: 'rotateX('+deg*-percentY + 'deg)'+' rotateY('+deg*percentX+'deg)'})
})$('#test').on('mouseleave', function(){$('#banner').css({transform: ''})
})

转载自前端开发指南：https://zhuanlan.zhihu.com/p/24177270

[转载]锤子官网的 banner 的 3D 悬浮效果相关推荐

HTML5锤子官网,锤子官网3D翻转特效banner插件
锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时,都会欣喜的玩耍一番那个会翻转的banner,感觉科技感十足这么有趣的效果,自己也很想试一试能否实现,于是就核心的特效做了代码的 ...
android banner阴影,仿照锤子科技官网的banner 3d效果
以前看到锤子科技官网的banner效果挺好玩的,一直没有研究:今天看到饥人谷,使用jquery给出了一种实现方式:我自己用原生js也实现了一遍.大致原理相同,但算法不同. 我的方法原理,如图所示,假设 ...
仿照锤子科技官网的banner 3d效果
以前看到锤子科技官网的banner效果挺好玩的,一直没有研究:今天看到饥人谷,使用jquery给出了一种实现方式:我自己用原生js也实现了一遍.大致原理相同,但算法不同. 饥人谷源码地址:http:/ ...
基于vue模仿苹果官网的banner图
**基于vue模仿苹果官网的banner图** 最近刚接了个新需求,需要做一个轮播图,于是二话不说,就使用element ui 自带的轮播图,简单又暴力,分分钟实现需求,然后又可以摸鱼了. 五分钟以后 ...
html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...
fullpage中实现类似锤子官网的效果
今天使用fullPage.js来实现一个网页,其他都还好,只有一点,header和footer一直有问题,它们的高度总是会占据全屏,很奇怪,网上搜了下,https://segmentfault.com ...
Android 仿美团网,大众点评购买框悬浮效果之修改版
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...
(转载)（官网）UE4--Character
角色通过给Pawn类添加一个CharacterMovementComponent.CapsuleComponent和SkeletalMesh,将Pawn类扩展为了具有更高功能的Charater(角色 ...
HTML5锤子官网,美国ESTWING 一体化锻造羊角锤非常好用的锤子
自1923年以来,美国Estwing设计与生产制造世界上最耐用.最舒适.最吸引人的敲击工具.上世纪美国航空航天局登月时也曾使用过该品牌的锤子.说白了,就是个专业生产锤子的美国厂家,只是做出名气来了. ...

[转载]锤子官网的 banner 的 3D 悬浮效果

[转载]锤子官网的 banner 的 3D 悬浮效果相关推荐

最新文章

热门文章