OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

开源项目:CSS 3D转换和动画学习示例教程


分享到
分类 JS开源   发布 ourjs  1387773681000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

下面介绍的开源项目,是CSS在动画/3D变换方面的一些应用,非常酷的效果,全部由CSS3来实现。

在这里JavaScript仅作为动画控制来使用,JS并不控制UI界面的具体呈现,切换动画、3D效果仅需要一条 addClass/removeClass即可。这在一定程度上体现了Web平台纯天然的MVC结构。

即:HTML(template) + CSS(view) + JavaScript(controller) + JSON(model)

这个实例同时也简单的说明了一点:在JS端实现的mvc可能有些过度设计,即不有利于SEO(搜索引擎优化),也不利于页面的性能的提升,看上去似乎有点偏离Web平台简单的本质,不过也许他们更适合服务器端来使用。



 CSS3 3D旋转及动画实例

演示地址: http://rupl.github.io/unfold/

这个项目演示了使用CSS3 实现3D变换,旋转,动画效果,一个很好的PPT模板。

 

 CSS3 3D旋转及动画实例

 演示地址: http://tobiasahlin.com/spinkit/

 CSS3实现的加载页面动画效果,附上一段示例代码:



CSS

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
 
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


HTML
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>




效果

附录:

CSS3 3D 变换属性列表

方法名描述
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定义3D变换矩阵(应用4X4的数列)
translate3d(x,y,z)定义3D坐标变换
translateX(x)定义3D坐标变换, 只在X轴做变换
translateY(y)定义3D坐标变换, 只在Y轴做变换
translateZ(z)定义3D坐标变换, 只在Z轴做变换
scale3d(x,y,z)定义3D拉伸变换
scaleX(x)定义3D拉伸变换, 只在X轴做变换
scaleY(y)定义3D拉伸变换, 只在Y轴做变换
scaleZ(z)定义3D拉伸变换, 只在Z轴做变换
rotate3d(x,y,z,angle)定义3D旋转变换
rotateX(angle)定义3D旋转变换,以X轴为旋转轴
rotateY(angle)定义3D旋转变换,以Y轴为旋转轴
rotateZ(angle)定义3D旋转变换,以Z轴为旋转轴
perspective(n)为一个3D变换后的元素定义一个视图

 

CSS3 动画属性

属性描述CSS
transition
动画四个属性的简写形式,(类似backgroud)3
transition-property
指定应用哪一条动画样式3
transition-duration
指定动画所需要的时间,默认是03
transition-timing-function
指定动画的插补方式,默认是"ease"3
transition-delay
指定动画延时多久开始. 默认是 03


原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 一名靠谱的JavaScript程序员应备的素质
  2. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  3. 人类只占到互联网流量的40%不到
  4. JS学习:JavaScript的核心
  5. Node初学者入门,一本全面的NodeJS教程
  6. 我为什么想把比特币一把火烧了
  7. 程序员最艰巨的十大任务
  8. 我和共享软件的那些事:我赚到了十万块
  9. 长时间工作意味着什么
  10. 编写更好的jQuery代码的建议
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. 开源项目:CSS 3D转换和动画学习示例教程
  2. 我为什么选择 D3.js
  3. Mozilla实验室发布的一款实时协作工具库TogetherJS
  4. 厌倦 Bootstrap 了没?来试试新玩具
  5. 不用HTML/CSS,JS就够了
  6. Tessel 开源硬件正式发布

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号