这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了 js 实现 3d 悬浮效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
效果如下:
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- *{margin: 0; padding: 0;} ul,li{list-style: none;} .container{perspective:
- 1300;-webkit-perspective:1300;} .boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px;
- -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation:
- a1 2s 1;*/transition: all 2s;} .boxList li{float: left;width: 200px;height:
- 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition:
- all 0.3s;} .on li:hover{-webkit-transform: translate3d(0,0,30px);transform:
- translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px
- rgba(0, 0, 0, 0.5);} .on{webkit-transform: rotateX(75deg) rotateY(0deg)
- rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);}
- </style>
- </head>
- <body>
- <div class="container">
- <ul class="boxList">
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- <li>
- </li>
- </ul>
- </div>
- </body>
- <script>
- var list = document.querySelector('.boxList');
- window.onload = function() {
- setInterval(transition, 1000)
- }
- function transition() {
- list.className = 'on boxList';
- }
- </script>
- </html>
来源: http://www.phperz.com/article/17/0704/327593.html