脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现3d悬浮效果

js实现3d悬浮效果

 更新时间：2017年02月16日 10:19:31   作者：hd564964  
本文主要分享了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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • KnockoutJS 3.X API 第四章之click绑定

    KnockoutJS 3.X API 第四章之click绑定

    click绑定主要作用是用于DOM元素被点击时调用相关JS函数。这篇文章主要介绍了KnockoutJS 3.X API 第四章之click绑定，感兴趣的朋友一起看看吧
    2016-10-10
  • 微信小程序虚拟列表的应用实例

    微信小程序虚拟列表的应用实例

    虚拟列表不是什么神秘的东西,下面这篇文章主要给大家介绍了关于微信小程序虚拟列表的应用实例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • Bootstrap风格的WPF样式

    Bootstrap风格的WPF样式

    此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.这篇文章主要介绍了Bootstrap风格的WPF样式的相关资料，需要的朋友参考下
    2016-12-12
  • JS+Canvas实现上传图片截图功能

    JS+Canvas实现上传图片截图功能

    在我们平时开发图片上传时,有时需要实现图片的裁剪功能,这篇文章主要为大家介绍了如何使用Canvas实现上传图片截图功能,希望对大家有所帮助
    2023-10-10
  • JS实现图片上传多次上传同一张不生效的处理方法

    JS实现图片上传多次上传同一张不生效的处理方法

    这篇文章主要介绍了JS实现图片上传多次上传同一张不生效的处理方法,处理方法也很简单，只要在删除方法里置空input，具体实例代码大家参考下本文
    2018-08-08
  • js实现瀑布流的三种方式比较

    js实现瀑布流的三种方式比较

    瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，这篇文章主要介绍了js实现瀑布流的三种方式，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 关于JS中的作用域中的问题思考分享

    关于JS中的作用域中的问题思考分享

    这篇文章主要介绍了关于JS中的作用域中的问题思考分享，scope和 closure是 javascript中两个非常关键的概念，前者JS用多了还比较好理解而且容易体会到，而 closure就不一样了。这玩意是真的很容易迷糊,需要的朋友可以参考下
    2022-04-04
  • JavaScript获取URL参数的几种方法小结

    JavaScript获取URL参数的几种方法小结

    在Web开发中,经常需要从URL中提取参数来进行相应的操作,本文将深度解析在JavaScript中获取URL参数的几种方法,并附带一些扩展与高级技巧,希望对你有所帮助
    2024-09-09
  • webpack打包单页面如何引用的js

    webpack打包单页面如何引用的js

    本篇文章主要介绍了webpack打包单页面如何引用的js，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • uni-app使用Vite.config.js配置文件的超详细教程

    uni-app使用Vite.config.js配置文件的超详细教程

    这篇文章主要给大家介绍了关于uni-app使用Vite.config.js配置文件的超详细教程,在uniapp开发中,vue.config.js是配置webpack的关键文件之一,也可以说是uniapp项目自定义配置的中心,需要的朋友可以参考下
    2023-12-12

最新评论