css3-d ,动画,圆角
一、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 ,动画,圆角的更多相关文章
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 编写自己的代码库(css3常用动画的实现)
编写自己的代码库(css3常用动画的实现) 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动).js的代码库也发过两次,两篇文章.之前也写了css3的热身实战 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
随机推荐
- R语言重要数据集分析研究——搞清数据的由来
搞清数据的由来 作者:李雪丽 资料来源:百度百科
- css3自适应圆
.class{ width:auto; height:auto; border-radius:11px; min-width:14px; padding:0 4px; font-size:12px; ...
- CoolBlog开发笔记第3课:创建Django应用
教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 前言 经过上一节我们已经创建了CoolBlog工程,但是关于CoolBlog的功能代码 ...
- node.js 发送http 请求
自己研究了一下 node.js 的 http模块 下面为想服务器发送请求的代码 ,通过学习了解http 请求的过程 ,node.js 对http请求的原始封装比较低,以前php 可以用$_GET , ...
- 【Android Developers Training】 25. 保存文件
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 2.如何使用matlab拟合曲线
输入数据 做数据曲线拟合,当然该有数据,本经验从以如下数据作为案例. 添加数据到curve fitting程序 这一步就是将你要拟合的数据添加到curve fitting程序中,同时给你拟合的曲线 ...
- 你应该知道的jQuery技巧【收藏】
jQuery的存在,让学习前端开发的人感到前端越来越容易入门了,用简单的几行代码就可以实现需求,但是,你真的会用jQuery么,当代码运行 后无法看到自己预期的效果,是不是觉得jQuery出了问题,其 ...
- 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. ...
- 从浅入深剖析angular表单验证
最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
- nodejs模块学习: connect2解析
nodejs模块学习: connect2 解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子来 ...