css 3d 动画 相关
- transform-style: preserve-3d; 设置3D模式
- perspective:700px ;属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身
- perspective-origin:50% 50% ;属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。
- 设置动画
@keyframes mymove- {
- 0% {top:0px;}
- 25% {top:200px;}
- 50% {top:100px;}
- 75% {top:200px;}
- 100% {top:0px;}
- }
- div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite; 绑定上面设置好的动画 时间 infinite规定动画应该无限次播放
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
值 | 描述 | 测试 |
---|---|---|
linear | 动画从头到尾的速度是相同的。 | 测试 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 | 测试 |
ease-in | 动画以低速开始。 | 测试 |
ease-out | 动画以低速结束。 | 测试 |
ease-in-out | 动画以低速开始和结束。 | 测试 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
css 3d 动画 相关的更多相关文章
- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...
- css 3D动画
一.今天让我们来学习一下css 3D吧! 1.首先我们要学习好css3 3d一定要有一定的立体感! 2.再来那就聊聊原理吧! 3.css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d ...
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- css3-13 css3的3D动画如何实现
css3-13 css3的3D动画如何实现 一.总结 一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...
- 10个超漂亮的CSS 3D特效
10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...
- CSS3动画相关属性详解
本文转载于:<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfo ...
- Codrops 优秀教程:CSS 3D Transforms 实现书本效果
这个使用 CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...
- 8个经典HTML5 3D动画赏析
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...
- CSS3之动画相关
CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...
随机推荐
- uC/OS-II中includes块
/*************************************************************************************************** ...
- CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡
一.简介 VS/NAT原理图: 二.系统环境 实验拓扑: 系统平台:CentOS 6.3 Kernel:2.6.32-279.el6.i686 LVS版本:ipvsadm-1.26 keepalive ...
- JavaWeb学习笔记——javabean与表单
- Java TCP编程
Java编写TCP编程--回射信息实例 注:简单的tcp联系,还存在问题,readUTF()为阻塞型,如果之前的用户一直不输入,则一直阻塞,之后的用户再连接会出现问题. import java.io. ...
- yourphp读取分类名称{$Categorys[$r[catid]]['catname']}
页面代码: product_list.html 提供分类的id,找出分类的名称 {$Categorys[$r[catid]]['catname']}
- 谈谈我对PhoneGap的看法——(摘自唐巧的技术博客)
源地址:http://blog.devtang.com/blog/2012/03/24/talk-about-uiwebview-and-phonegap/ 主题部分 我认为PhoneGap有以下3大 ...
- JAVA中的聚集和组合的区别和联系
选自<JAVA语言程序设计-基础篇(原书第8版)> 定义:一个对象可以包含另一个对象.这两个对象之间的关系称为组合(composition). 组合实际上是聚集关系的一种特殊形式.聚集模拟 ...
- yii2的urlManager配置
网址伪静态是一个非常常用的网站需求,Yii2可以非常简单地进行配置. 首先,在配置文件config/main.php的'components' 段中,加入如下设置:'urlManager'=>a ...
- linux中Jetty的安装和配置
Jetty Jetty 是一个开源的servlet容器,它为基于Java的web内容,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开 ...
- vim ctags使用方法
一.用好系统自带软件ctags 大部分的unix系统都有ctags软件,它能跟vim很好地合作. 用途: 生成c语言的标签文件,实现相关c文件之间的跳转. 用法: 1.生成标签文件 ...