来自于Mozilla Networks演示工作室的超酷CSS3/Javascript动画演示

最新推荐文章于 2018-12-12 19:38:33 发布
最新推荐文章于 2018-12-12 19:38:33 发布
阅读量89 收藏
点赞数
分类专栏： CSS 文章标签： HTML5 CSS3 Javascript jQuery 图标 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tyygming/article/details/84210499
版权

日期：2012-4-25  来源：GBin1.com

这个叫做DemoStudio的网站来自于Mozilla Developer networks，收集了很多超酷的CSS3和Javascript特效。因为都是实验产品，所以如果你使用这些技术，有可能在一些老的浏览器，比 如，IE中无法正常工作。当然如果你有fallback的话，大可以使用这些技术。相信你肯定会喜欢这些超酷的特效。如果大家喜欢，请给我们留言！

折纸效果

相当不错的折纸效果

Paperfold

RotorJS

旋转3D操作类库 - 轻量级并且可扩展

RotorJS

3D图片过渡

类似flash效果的3D CSS过渡效果

3D Image transition

The Box

一个动画卡片和白纸的3D情节，由回收材料制成。

The Box

3D Flip list menu

一个翻动的3D菜单特效

CSS3 Reflection effect

动画菜单图标

小并且可缩放，纯CSS3实现的动画

Animated Menu Icons

Animated CSS3 Gallery

一个使用淡入缩放图片效果画廊

Animated CSS3 Gallery

...

来源：来自于Mozilla Networks演示工作室的超酷CSS3/Javascript动画演示

tyygming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据结构算法演示swf——单链系列（整理出来的，很直观，很不错！）
11-30
包括： 单链表结点的插入.swf 单链表结点的删除.swf 头插法建单链表.swf 尾插法建表.swf
css3-space-demo:Mozilla FirefoxCSS3动画和渐变演示
05-10
本项目“css3-space-demo”是专为Mozilla Firefox浏览器展示CSS3动画和渐变效果的一个实例。通过这个演示，我们可以深入理解并学习如何在实际开发中应用这些技术。 一、CSS3动画（Animations） 1. 定义动画：CSS3...
flash动画编程学习研究-机器人传球演示
Kinglong's Blog
07-27 219
这几天在看Keith Peters的书《Foundation Actionscript 3.0 Animation》（[url]http://blog.sina.com.cn/s/articlelist_1053530897_3_1.html[/url]），看到了反 动力学部分，深深体会到flash物理动画研究起来，真得蛮有意思的，作者在文中提到“让两个手臂相互传球”时，...
动画递归
weixin_43218083的博客
12-12 386
activity_main.xml： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
浅谈算法和数据结构: 二 基本排序算法
weixin_34392435的博客
01-20 291
本篇开始学习排序算法。排序与我们日常生活中息息相关，比如，我们要从电话簿中找到某个联系人首先会按照姓氏排序、买火车票会按照出发时间或者时长排序、买东西会按照销量或者好评度排序、查找文件会按照修改时间排序等等。在计算机程序设计中，排序和查找也是最基本的算法，很多其他的算法都是以排序算法为基础，在一般的数据处理或分析中，通常第一步就是进行排序，比如说二分查找，首先要对数据进行排序。在Donald Kn...
非常基础的JS动画演示
weixin_33966095的博客
06-16 115
这个例子使用setTimeout实现非常简单的动画效果。 <style type="text/css">div{    height:200px;    width:600px;    background-color:#CCCCCC;}#test1{    background:#99CC00;    position:fixed;    left:300px;    filter...
带有css3动画效果的兼容多浏览器简单导航条示例
09-25
在本示例中，我们探讨的是一个使用原生JavaScript和CSS3实现的兼容多浏览器的简单导航条。这个导航条不仅具有下拉菜单功能，还加入了CSS3动画效果，为用户体验增添了动态美感。以下是该导航条实现的关键知识点： 1....
css中用javascript判断浏览器版本
12-09
对于CSS，一些特性如CSS3的动画、伪元素等在老版本的IE中可能不被支持，因此检测浏览器版本可以帮助我们决定是否使用这些高级特性。 此外，还可以使用`navigator.userAgent`属性来获取更详细的浏览器信息，包括...
学习材料以学习HTML5 / CSS3的合规性
04-04
1. **MDN Web Docs**（https://developer.mozilla.org/zh-CN/）：Mozilla Developer Network提供了详尽的文档和教程，涵盖了HTML5和CSS3的所有关键特性，是开发者必备的学习平台。 2. **W3Schools**...
JavaScript CSS修改学习第二章 样式
12-10
JavaScript CSS修改学习主要涉及到网页样式动态操作，包括通过JavaScript获取和修改CSS属性。在第二章中，我们将重点关注如何使用JavaScript来获取元素的样式信息，尤其是那些无法通过`style`属性直接读取的样式。 ...
演示动画怎么实现的
红桃峰峰 的博客
10-26 874
在CSDN博客中看到好多博客中有演示动画，做的特别好，使读者看的很明白，一眼就能确定是不是自己想要的东西，有好多人还不知道他们是怎么实现的，其实他们就是使用动画工具，录制的gif动画，我到网上找到了这款工具，现在分享给大家，方便大家使用。 演示动画如下： 下载地址一：http://pan.baidu.com/s/1pJMRixd 下载地址二：http://download.csdn.
视图动画学习算法和数据结构（一）（<Garry进阶（四）>）
GarryLin的专栏
01-25 2106
转载请注明原出处：http://blog.csdn.net/lrs123123/article/details/43114619 这是一个写给自己复习温习的博文，不喜勿喷  ，结合视图动画学习数据结构算法 欢迎学习
用动画演示二叉树的前序遍历
程序员吴师兄的博客
11-15 1804
LeetCode上第144 号问题：二叉树的前序遍历 题目 给定一个二叉树，返回它的 前序 遍历。 示例: 输入: [1,null,2,3] 输出: [1,2,3] 进阶: 递归算法很简单，你可以通过迭代算法完成吗？ 解题思路 用**栈(Stack)**的思路来处理问题。 前序遍历的顺序为根-左-右，具体算法为： 把根节点push到栈中 循环检测栈是否为空，若不空，则取出栈顶元...
动画演示9个超有趣的Linux命令
wuxiaobingandbob的专栏
03-08 2317
动画演示9个超有趣的Linux命令 Linux最强大的一个特征就是它有大量的各种小命令工具，这也可以称做是它最有趣的一个地方了。 在这些大量的有用的命令和脚本中，你会发现有少部 分命令工具不那么有用的——如果你不愿意说是完全没用处的话。 你要知道，Linux命令终端并不是总来干一些严肃的事情的，这里列举的几个没有实际用处、 但很有趣的命令。 它们的有趣并不是因为无用，而是真的有
一个小仓鼠的js动画
weixin_30571465的博客
07-26 336
直接在网页打开就可以玩了； http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&amp...
flash动画《奇袭》系列——二蛋实例分析
wangangie33
04-08 208
[1b]场景介绍：[/1b] 前一场景2蛋把鬼子队长一脚踹入炮楼,如图4-244——247所示。这时2蛋仰头发现楼顶的鬼子将要跳下攻击他，所以2蛋回身转向刚才鬼子掉落的步枪处，用脚尖轻轻跳起步枪，飞身一个领空倒挂步枪如离弦之箭射向跳下的鬼子，一声惨叫后，鬼子抽出的身体慢慢僵硬下来，镜头拉开，2蛋依然蓄势待发，静场片刻，复活的鬼子队长怪叫一声冲出炮楼杀向2蛋，画面嘎然而至！这个场景是2蛋传奇...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
最新发布
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
css3实现3D动画
02-07
使用 CSS3 可以实现 3D 动画效果。要实现 3D 动画，需要使用 CSS3 中的 `transform` 属性。 要将一个元素变为 3D 元素，可以使用 `transform: perspective(depth)` 属性。depth 参数表示 3D 元素的透视深度，值越大，3D 效果越明显。 然后，可以使用 `transform: rotateX(angle)`、`transform: rotateY(angle)` 和 `transform: rotateZ(angle)` 属性来旋转 3D 元素。angle 参数表示旋转的角度，可以使用角度值或弧度值。 例如，以下代码将一个 div 元素变为 3D 元素，并以 y 轴为中心旋转 180 度： ```css div { transform: perspective(500px) rotateY(180deg); } ``` 还可以使用动画属性（如 `transition` 和 `animation`）来创建动画效果。例如，以下代码定义了一个持续 2 秒的 3D 旋转动画，转一圈后停止： ```css div { transform: perspective(500px) rotateY(0deg); transition: transform 2s; } div:hover { transform: perspective(500px) rotateY(360deg); } ``` 更多信息请参阅 MDN 文档：[3D 转换](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) 和 [动画](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations)。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值