一、3D

开启元素3D
transform-style: preserve-3d;

Z轴 正数 屏幕外,反之屏幕内

近大远小
perspective: length (必须大于等于0) -- 在3D元素中设置,所有子元素统一生效。

transform: perspective(200px) -- 给3D元素的子元素单独设置景深

景深中心点:设置“观察者”位置。
perspective-origin: x y

背面是否可见

backface-visibility:

- hidden: 元素背面朝向观察者不可见。

在火狐中,必须配合
transform: translateZ(0);

二、动画

animation-name: 关键帧名, 关键帧名2
animation-duration: 动画一个播放周期持续的时间。
animation-delay: 延迟时间
animation-timing-function: 设置动画效果(三次贝塞尔曲线)

每一帧的播放顺序
animation-direction
- alternate 交替反向执行
- reverse 反向执行
- alternate-reverse 反向交替执行

控制播放次数
animation-iteration-count:
number
infinite 无限次播放

暂停
animation-play-state
running
paused 暂停(一般配合状态伪类使用)

填充:动画开始或者结束后使用第一帧或者最后一帧填充
animation-fill-mode:

backwards: 动画开始前,显示第一帧,(需要设置延迟执行时间)
forwards:动画开始后,显示最后一帧
both: 动画开始前,显示第一帧,(需要设置延迟执行时间),动画开始后,显示最后一帧

注意事项:没有绝对的第一帧和最后一帧,与动画的播放顺序有关。

简写:
animation: 无顺序要求,如果出现两个时间,最后一个代表延迟时间。
与过渡类似,也存在样式覆盖问题。

//定义动画变化的规则
@keyframes 关键帧名 {

0% ~ 100%{
css样式(有部分样式不支持)
}

第一帧:0%{}, from{}
最后一帧:100%{}, to{}

//备注:每一帧的变化自动有补间动画,无需设置过渡效果

}

三、查看某一CSS样式在各浏览器支持情况
http://www.caniuse.com

四、圆角

border-radius: 左上,右上,右下,左下
border-radius: 左上,右上,右下,左下(x轴半径) / 左上,右上,右下,左下(y轴半径)

css3-d ,动画,圆角的更多相关文章

  1. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  2. 编写自己的代码库(css3常用动画的实现)

    编写自己的代码库(css3常用动画的实现) 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动).js的代码库也发过两次,两篇文章.之前也写了css3的热身实战 ...

  3. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  4. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  5. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  6. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  7. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  8. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  9. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  10. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

随机推荐

  1. R语言重要数据集分析研究——搞清数据的由来

    搞清数据的由来 作者:李雪丽 资料来源:百度百科

  2. css3自适应圆

    .class{ width:auto; height:auto; border-radius:11px; min-width:14px; padding:0 4px; font-size:12px; ...

  3. CoolBlog开发笔记第3课:创建Django应用

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 前言 经过上一节我们已经创建了CoolBlog工程,但是关于CoolBlog的功能代码 ...

  4. node.js 发送http 请求

    自己研究了一下 node.js 的 http模块  下面为想服务器发送请求的代码 ,通过学习了解http 请求的过程 ,node.js 对http请求的原始封装比较低,以前php 可以用$_GET , ...

  5. 【Android Developers Training】 25. 保存文件

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. 2.如何使用matlab拟合曲线

    输入数据 做数据曲线拟合,当然该有数据,本经验从以如下数据作为案例.   添加数据到curve fitting程序 这一步就是将你要拟合的数据添加到curve fitting程序中,同时给你拟合的曲线 ...

  7. 你应该知道的jQuery技巧【收藏】

    jQuery的存在,让学习前端开发的人感到前端越来越容易入门了,用简单的几行代码就可以实现需求,但是,你真的会用jQuery么,当代码运行 后无法看到自己预期的效果,是不是觉得jQuery出了问题,其 ...

  8. java项目(非ssm等框架)下的quartz定时器任务

    第一步:引包 要使用Quartz,必须要引入以下这几个包: 1.log4j-1.2.16 2.quartz-2.1.7 3.slf4j-api-1.6.1.jar 4.slf4j-log4j12-1. ...

  9. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  10. nodejs模块学习: connect2解析

    nodejs模块学习: connect2 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子来 ...