当前位置: 首页 > news >正文

[CSS3备忘] transform animation 等

一些CSS不经常用就会忘记,好吧,现在整理再学习一下,也留做备忘,方便以后查看。。。

 

perspective的理解:

  1、数值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻(比如看电影,越前面的人屏幕越大)

  2、数值大,用户与3D空间Z平面距离越远,视觉效果就很小

  3、数值无穷大 | 为0  == none 即:无透视

  4、perspective分为perspective属性和perspective函数,两者的区别:

      perspective属性在父元素中添加,为none | 长度值,perspective函数在子元素添加(与tranform一起使用),数值>0;

      perspective属性,有多个元素,看到的效果是不一样的,perspective函数,有多个元素,看到的效果是一样的,请见张旭鑫的deom:舞台多元素下的perspective两种书写对比demo

  5、当父元素perspective:200px时,子元素transform:translateZ(200px)会辅满整个屏幕(没有设置display:hidden,如果设置会不起作用),当>200px,会看不到(以电影幕为例,人跑到电影幕后面去,看不到后面的东西)

 

perspective-original:X方向 Y方向

transform-style :preserve-3d    | transfrom:transformZ()开启3D效果

backface-visibility: visible | hidden

参考:

  1、大漠的Transform-style和Perspective属性

  2、张旭鑫的好吧,CSS3 3D transform变换,不过如此!

 

animation和transition

animation: animation-name  animation-duration  animation-timing-function  animation-delay  animation-iteration-count  animation-direction  animation-fill-mode  animation-play-state

(none 0s ease 0s 1 normal none running)

  animation-name:none

  animation-duration:0s

  animation-timing-function:ease

  animation-delay:0s

  animation-iteration-count:1 | infinite

  animation-direction:normal | reverse | alternate(交替) | reverse-alternate

  animation-fill-mode:none | forwards(最后一帧) | backwards(第一帧) | both

  animation-play-state:running | pause

 

transition:  transition-property  transition-duration  transition-timing-function  transition-delay

 

  

转载于:https://www.cnblogs.com/joya0411/p/5368508.html

相关文章:

  • codeforces 660C C. Hard Process(二分)
  • 广搜最短路(最短时间到达目的地),POJ(3669)
  • 06章 初始继承和多态
  • Paragon NTFS for Mac® Yosemite - 免费下载
  • 全栈工程师的未来发展如何?
  • Linux内核分析8
  • CentOS 7.x设置自定义开机启动,添加自定义系统服务
  • linux中萌翻了的cowsay命令
  • UVA 10129 Play on Words (欧拉通路)
  • 数据库 -- SQL 和 NoSQL 的区别
  • 进度条(第七周)
  • JAVA中十四种常见开发工具及其特点
  • spring Thymeleaf 中文乱码 (转)
  • BZOJ4380: [POI2015]Myjnie
  • iOS开发经验总结
  • extract-text-webpack-plugin用法
  • HTTP中的ETag在移动客户端的应用
  • in typeof instanceof ===这些运算符有什么作用
  • Java小白进阶笔记(3)-初级面向对象
  • miaov-React 最佳入门
  • Otto开发初探——微服务依赖管理新利器
  • python学习笔记-类对象的信息
  • react 代码优化(一) ——事件处理
  • Swoft 源码剖析 - 代码自动更新机制
  • TypeScript实现数据结构(一)栈,队列,链表
  • vue 个人积累(使用工具,组件)
  • Vue 动态创建 component
  • 闭包--闭包之tab栏切换(四)
  • 使用Envoy 作Sidecar Proxy的微服务模式-4.Prometheus的指标收集
  • 要让cordova项目适配iphoneX + ios11.4,总共要几步?三步
  • 一道闭包题引发的思考
  • nb
  • 进程与线程(三)——进程/线程间通信
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • (1)(1.11) SiK Radio v2(一)
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (六)Hibernate的二级缓存
  • (十六)Flask之蓝图
  • (转)Oracle 9i 数据库设计指引全集(1)
  • (转)winform之ListView
  • (转)编辑寄语:因为爱心,所以美丽
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • 、写入Shellcode到注册表上线
  • .desktop 桌面快捷_Linux桌面环境那么多,这几款优秀的任你选
  • .Net core 6.0 升8.0
  • .NET Remoting学习笔记(三)信道
  • .NET WebClient 类下载部分文件会错误?可能是解压缩的锅
  • .Net(C#)常用转换byte转uint32、byte转float等
  • .net之微信企业号开发(一) 所使用的环境与工具以及准备工作
  • // an array of int
  • :O)修改linux硬件时间
  • ??如何把JavaScript脚本中的参数传到java代码段中