资讯频道 → Web前端
阅读更多

5顶
0踩

Web前端

原创新闻 6个绚丽时尚的前端3D效果及源码

2014-08-07 14:46 by 见习记者 agevs 评论(6) 有23829人浏览
web 框架 UI jquery javascript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

作为一个前沿的 Web 开发者，对于 HTML5 和 现在流行的3D技术或多或少都有掌握。前几年这些新技术刚萌芽的时候，开发者们已经使用它们来小试牛刀了，如今这些先进技术已经遍地开发，特别是在移动端大显身手。这篇文章挑选了6个前沿的绚丽的3D展示效果，希望对你有所帮助。

 

1.  3D自由立体旋转现实物理效果 

 

3D自由立体旋转是一个基于 HTML5 技术的实验，模拟现实物理效果，让你在 Web 中感受自然物体的3D自由立体旋转运动。玩法介绍：可以随意拖动鼠标、按住鼠标左键选中旋转物体、或者按住鼠标滑轮放大或者缩小，有不同的效果，赶紧来体验一下。 

 

 

源码下载/  在线演示

 

2.  CSS3学习 - 骰子动画效果（滚轮放大可以看骰子里的世界！） 

 

这个插件集成了一些非常好的 JavaScript 库，提供一个方便使用的文本动画插件，可以让你3D全方位的看到物体里边的世界哟。



 

 源码下载/  在线演示

 


3.  jquery推开窗户3D特效

jquery实现的推开窗户的3D特效，会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。 

 

 

源码下载/   在线演示


4.  jquery html内容3D翻转显示 

 

rotate3di.js 是一个用于实现翻转的 JavaScript 库。您可以设置动态光的位置，可定制的阴影。不依赖于第三方库。能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。 



 

源码下载/   在线演示

 

5.  jquery动画洗牌图片3D特效

 

modernizr.custom.34807.js 是一款用于时尚、现代的3D效果的 JavaScript 库，你需要做的就是添加您所要实现的图效，剩下的任务就交给js 算法了，使用非常简单。提供了动画洗牌图片效果，满足开发的各种场合需要。



 
源码下载 /   在线演示


6. 实现360度多角度展示效果 

使用 jquery和html结合实现超逼真的方块展示效果，呈现3D画面的技术，有别于过去需要安装浏览器插件，只需要编写网页代码即可实现3D图像的展示。 


 

 

源码下载 /   在线演示 

 

  • 大小: 33.9 KB
  • 大小: 21 KB
  • 大小: 187.9 KB
  • 大小: 41.4 KB
  • 大小: 66.2 KB
  • 大小: 41.9 KB
5
顶
0
踩
评论 共 6 条 请登录后发表评论
6 楼 补魔党 2014-11-04 14:00
您的tomcat已经关闭!建议您重启您的TOMCAT!
5 楼 huoquan 2014-08-21 13:40
最专业的UI前端框架！点这里
4 楼 bawangse 2014-08-18 14:16
楼主这些组件都是开的吗
3 楼 zendly 2014-08-12 20:33
效果很一般
2 楼 fykyx521 2014-08-09 12:57
卖组件的 首先自己的界面就太差
1 楼 xueyou 2014-08-08 18:48
这个真心不错啊，组件很好

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 6个顶级时尚的Web前端3D效果源码.rar

    作为一个前沿的 Web 开发者，对于 HTML5 和 现在流行的3D技术或多或少都有掌握。前几年这些新技术刚萌芽的时候，开发者们已经使用它们来小试牛刀了，...这篇文章挑选了6个前沿的绚丽的3D展示效果，希望对你有所帮助。

  • 6个顶级时尚的Web前端3D效果源码（六）

    在线效果：http://ynif.v099.10000net.cn/demo/3D/6/jiaoben145/index.html

  • 6个绚丽时尚的Web前端3D效果展示（附源码）

    作为一个前沿的 Web 开发者，对于 HTML5 和 现在流行的3D技术或多或少都有掌握。前几年这些新技术刚萌芽的时候，开发者们已经使用它们来小试牛刀了，...这篇文章挑选了6个前沿的绚丽的3D展示效果，希望对你有所帮助。

  • 6个绚丽时尚的Web前端3D效果展示（附源码）（六）

    实现360度多角度展示效果 使用 jquery和html结合实现超逼真的方块展示效果，呈现3D画面的技术，有别于过去需要安装浏览器插件，只需要编写网页代码即可实现3D图像的展示。 源码下载 / 在线演示   ...

  • 6个绚丽时尚的Web前端3D效果展示（附源码）（一）

    作为一个前沿的 Web 开发者，...这篇文章挑选了6个前沿的绚丽的3D展示效果，希望对你有所帮助。   1. 3D自由立体旋转现实物理效果  3D自由立体旋转是一个基于 HTML5 技术的实验，模拟现实物理效果，让你在...

  • 6个绚丽时尚的Web前端3D效果展示（附源码）（五）

    modernizr.custom.34807.js 是一款用于时尚、现代的3D效果的 JavaScript 库，你需要做的就是添加您所要实现的图效，剩下的任务就交给js 算法了，使用非常简单。提供了动画洗牌图片效果，满足开发的各种场合需要。 ...

  • 6个绚丽时尚的Web前端3D效果展示（附源码）（三）

    jquery实现的推开窗户的3D特效，会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。    源码下载 / 在线演示 

  • 6个绚丽时尚的Web前端3D效果展示（附源码）（二）

    CSS3学习 - 骰子动画效果（滚轮放大可以看骰子里...这个插件集成了一些非常好的 JavaScript 库，提供一个方便使用的文本动画插件，可以让你3D全方位的看到物体里边的世界哟。      源码下载/ 在线演示 ...

  • 6个绚丽时尚的Web前端3D效果展示（附源码）（四）

    jquery html内容3D翻转显示 rotate3di.js 是一个用于实现翻转的 JavaScript 库。您可以设置动态光的位置，可定制的阴影。不依赖于第三方库。能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。      ...

  • 前端实现炫酷动效_超级绚丽，20款前端动画特效，轰炸你的眼睛

    前言HTML5一个相当出色的web技术，它不仅可以让你更加方便地操纵页面元素，而且可以通过canvas实现更多的动画特效，引进HTML5标准后，CSS3也就可以发挥更大的作用。本文主要介绍了一些基于HTML5 Canvas的动画特效，...

  • web前端html期末大作业实例 (1500套)

    你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程...

  • web前端期末大作业实例 (1500套) 集合

    你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程...

  • 8个时尚而简约的HTML5按钮

    1、基于Bootstrap的jQuery开关按钮组合Bootstrap是一款由Twitter推出的开源前端开发包，功能非常强大。今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的，看了按钮的主题样式，也都...

  • 整理六百篇web前端知识混总

    整理六百篇web前端知识混总： 9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10...

  • 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    3D按钮特效，有几个还挺实用的，分享给大家。 1、CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮，比如5组可爱CSS3按钮、CSS3灰色按钮菜单 超具3D立体感等。今天我又要向大家...

  • 基于51单片机的音乐播放器设计+全部资料+详细文档（高分项目）.zip

    【资源说明】 基于51单片机的音乐播放器设计+全部资料+详细文档（高分项目）.zip基于51单片机的音乐播放器设计+全部资料+详细文档（高分项目）.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 2024xxx市智能静态交通系统运营项目可行性实施方案[104页Word].docx

    2024xxx市智能静态交通系统运营项目可行性实施方案[104页Word].docx

  • Cadence-Sigrity-PowerDC-2023.1版本的用户手册.pdf

    Sigrity PowerDC technology provides comprehensive DC analysis for today's low voltage, high-current PCB and IC package designs. It is available with integrated thermal analysis to enable electrical and thermal co-simulation. Using PowerDC, you can assess critical end-to-end voltage margins for every device to ensure reliable power delivery. PowerDC quickly identifies areas of excess current density and thermal hotspots to minimize the risk of field failure in your design.

  • node-v0.12.10-sunos-x86.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • node-v4.8.3-darwin-x64.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics