html 3d转换动画,开源项目:CSS 3D转换和动画学习示例教程
下面介绍的开源项目,是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旋转及动画实例
这个项目演示了使用CSS3 实现3D变换,旋转,动画效果,一个很好的PPT模板。
CSS3 3D旋转及动画实例
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
效果
附录:方法名描述
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变换后的元素定义一个视图
属性描述CSS
动画四个属性的简写形式,(类似backgroud)3
指定动画延时多久开始. 默认是 03
html 3d转换动画,开源项目:CSS 3D转换和动画学习示例教程相关推荐
- 「CSS 3D 专题」搞懂 CSS 3D,你必须理解 perspective(视域)这个属性
关注前端达人,与你共同进步 开篇 上一章节<学习前,你需要了解什么是CSS 3D?>里,我们一起了解什么是CSS 3D,本篇章节笔者将带着大家学习 perspective(视域)这个重要属 ...
- 2020 年最具潜力的 44 个顶级开源项目,涵盖 11 类 AI 学习框架、平台(附链接)...
来源:AI开发者 本文约为7600字,建议阅读10分钟 本文给开发者提供了详细的各领域工具并整理了清单11 种极具潜力的 AI 工具类型. 工欲善其事必先利其器,这也是大部分开发者在日常工作中最重要开 ...
- 2020 年最具潜力 44 个顶级开源项目,涵盖 11 类 AI 学习框架、平台(值得收藏)
导语:Github 开源项目技术图 雷锋网 AI 开发者按:工欲善其事必先利其器,这也是大部分开发者在日常工作中最重要开发原则.选择与开发内容相匹配的工具,常常会使我们事半功倍.但面对人工智能的多个 ...
- [转]2020 年最具潜力 44 个顶级开源项目,涵盖 11 类 AI 学习框架、平台(值得收藏)
导语:Github 开源项目技术图 雷锋网 AI 开发者按:工欲善其事必先利其器,这也是大部分开发者在日常工作中最重要开发原则.选择与开发内容相匹配的工具,常常会使我们事半功倍.但面对人工智能的多个 ...
- 2020 年最具潜力 44 个顶级开源项目,涵盖 11 类 AI 学习框架、平台(值得收藏)...
文末有干货 "Python高校",马上关注 真爱,请置顶或星标 作者:杨鲤萍 工欲善其事必先利其器,这也是大部分开发者在日常工作中最重要开发原则.选择与开发内容相匹配的工具,常常会 ...
- 收藏!2020 年最具潜力 44 个顶级开源项目,涵盖 11 类 AI 学习框架、平台
通过公众号[计算机视觉联盟]可加博士微信(Kingsplus)交流,备注:单位/学校+研究方向 ,分享最新的AI思维导图和笔记 笔记作者:王博简介 985AI博士,CSDN博客专家 已 ...
- 2020年最具潜力44个顶级开源项目,涵盖11类 AI 学习框架、平台
转自 | AI开发者 工欲善其事必先利其器,这也是大部分开发者在日常工作中最重要开发原则.选择与开发内容相匹配的工具,常常会使我们事半功倍.但面对人工智能的多个领域,如:机器学习.深度学习.计算机视觉 ...
- 众多Android 开源项目推荐,给力工作给力学习
http://terryblog.blog.51cto.com/1764499/547777 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.h ...
- android 动画开源框架,21款炫酷动画开源框架,照亮你的APP
前言 最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮助,此博文介绍的都是UI上面的框架. 1.Side-Menu.Android 分类侧 ...
最新文章
- redis中密码设置
- 调研字节码插桩技术,用于系统监控设计和实现
- 横河川仪压力变送器调零_YOKOGAWA/横河EJX110A差压变送器的性能误差和精度介绍!...
- (原创) 对饱和状态NPN晶体管内部机制的理解分析
- linux qt getpid,[QTA] Android 动态注入原理分析
- 【JS 逆向百例】网洛者反爬练习平台第五题:控制台反调试
- python中列表的常用操作
- js金额格式化最简单方法 JS对货币格式化,js钱三位一隔,javascript货币格式化
- python itertools模块_Python标准模块--itertools
- mysql concat 能否返回数字_关于Mysql中GROUP_CONCAT函数返回值长度的坑
- Python语言程序设计 嵩天
- Magick.NET Crack,支持多种文件格式的综合库
- 【王者荣耀】入门战斗经验
- java poi将每一个cell设置为文本格式
- podman的配置以及命令详解
- VC++将位图中保存的图像灰化(附源码)
- sangerbox平台使用(五)venn图的绘制
- eclipse中servers(服务器)的配置
- 关于线性空间和线性映射
- php 爬取新闻,scrapy抓取学院新闻报告