CSS3(transform/transition/animation) 基础 总结
1、CSS3新增的样式(常用)
//颜色透明表示
rgba(0,0,0,.5) //圆角(定义角半径)
border-radius: 5px 10px 15px 20px; //文字/盒子阴影
text-shadow: 2px 3px 3px #000; //x方向,y方向,模糊半径,颜色(可定义多个阴影)
box-shadow: (inset) 2px 3px 3px #000; //内阴影,x方向,y方向,模糊半径,颜色(可多个阴影) //线性/径向渐变(没有纳入标准,需加浏览器内核前缀)
background-image: -linear/radial-gradient(left/left top/deg,#ccc,#000,red 50%,...);//起始方向,渐变的颜色(颜色占用的百分比)
background-image: -repeating-linear/radial-gradient(#ace 32%, #f96 36%); //重复渐变,不定方向默认90deg
以上样式比较简单易用,不过细心用起来会发现可以实现很多很意料之外的效果,很强大的。以后遇到其他什么3D效果、渐变突出button,金属文字效果什么的,以上代码便可以实现。随便举个简单的 模拟按钮button 应用,e.g:
//HTML
<div class="box"><a href="">btn</a></div> //CSS
.box a {
display: block;
width: 250px;
color: #fff;
font-size: 70px;
line-height: 1.5em;
margin: 30px auto;
text-decoration: none;
border: 1px solid rgba(0,0,0,.3);
//这部分是CSS3应用
border-radius: 5px;
text-shadow: 1px 1px 0 rgba(0,0,0,.4);
box-shadow: 0 0 1px rgba(0,0,0,.4);
background-image: -webkit-linear-gradient(90deg,#eaeaea,#c5c5c5); //webkit内核浏览器才能识别
}
.box a:hover {
background-image: -webkit-linear-gradient(-90deg,#eaeaea,#c5c5c5);
}
2、CSS3的变形:transform (需前缀,请自行添加)
rotate(30deg) //旋转
translate(x,y)/translateX(x)/translateY(y) //平移(x/y轴平移)
scale(x,y)/scaleX(x)/scaleY(y) //缩放
skew(x,y)/skewX(x)/skewY(y) //扭曲 //重定义变形的基点,以上属性都有其默认基点
transform-origin: x y; //定义多个属性
transform: rotate(30deg) scale(0.8,1.5) skew(30deg,-20deg);
3、CSS3的过渡变换:transition (需前缀,请自行添加)
//以下省略了前缀-transition
-property: name; //变换的属性名
-duration: time; //持续时间
-timing-function:
ease //默认,逐步变慢
linear //匀速
ease-in/out //加速/减速
ease-in-out //先加再减速
cubic-bezier(x1,y1,x2,y2) //自定义时间贝塞尔曲线
-delay: time; //推迟时间 //定义多个变换
transition: all .5s ease-in-out 1s;
参考:http://www.css88.com/archives/5403
4、CSS3动画制作:animation(keyframes) (需前缀,请自行添加)
首先,定义关键帧keyframes,学过flash动画的应该就很明白这个概念了
//百分比定义时间段
@keyframes name {
0% {属性状态}
10% {属性状态}
70% {属性状态}
100% {属性状态}
}
//从开始到结束的定义
@keyframes name {
from {属性状态}
to {属性状态}
}
然后,定义动画animation,大部分属性和transition的属性一样的,就没写的太详细了。
//以下省略了前缀-animation
-name: name; //动画名(关键帧的名称)
-duration: time; //持续时间
-timing-function: linear; //动画的时间曲线
-delay: time; //推迟时间
-iteration-count: infinite; //为数字,infinite指无限次
-direction: //动画方式
normal //默认值
alternate //奇数次时反方向执行动画
-play-state: running/paused; //动画状态:播放/停止 //定义多个属性
animate: name 3s ease-in-out 2s infinite alternate;
CSS3(transform/transition/animation) 基础 总结的更多相关文章
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- css3的新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- css3 - transform, transition 与 translate
零.序言 css 3 的新特性,很多都停留在听说而非实际使用.transform, transition, translate 这三长得实在太像,刚开始的时候总是迷迷糊糊,分不清它们的功能.而最近新接 ...
- css—动画(transform, transition, animation)
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...
- css3 tranform transition animation
tranform:对象图形变形 tranform的属性包括: 1.none 表示不进行变换: 2.rotate 旋转 transform:rotate(20deg) 旋转 ...
- CSS3之 transform和animation区别
CSS3 有3种和动画相关的属性:transform, transition, animation.其中 transform 描述了元素静态样式.而transition 和 animation 却都能 ...
随机推荐
- cocos2dx 3.1.1移植安卓apk (lua交叉编译器项目 mac环境)
cocos2dx 3.1.1 lua项目安卓交叉编译 mac环境 本文基于ant,sdk,ndk,adt等软件和环境已经事前设置好 1\新建项目 在mac的终端下输入命令: cocos new t ...
- Java设计模式菜鸟系列(四)工厂方法模式建模与实现
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39760895 工厂方法模式(Factory Method) 工厂方法:顾名思义,就是调用工 ...
- 线程同步synchronized
一Java规划共享多个线程之间数据的能力. 当线程以异步方式訪问共享数据时.有时候是不安全的或者不和逻辑的. 比方卖火车票.同一时刻一个线程在读取数据,另外一个线程在处理数据,当处理数据的线程没有等到 ...
- Java数据结构与算法(2) - ch03排序(冒泡、插入和选择排序)
排序需要掌握的有冒泡排序,插入排序和选择排序.时间为O(N*N). 冒泡排序: 外层循环从后往前,内存循环从前往后到外层循环,相邻数组项两两比较,将较大的值后移. 插入排序: 从排序过程的中间开始(程 ...
- [CLR via C#]5.1 基元类型
原文:[CLR via C#]5.1 基元类型 某些数据类在开发中非常常用,以至于许多编译器允许代码已简化的语法来操作它们.例如可以使用以下语法来分配一个整数: System.Int32 a = ne ...
- 如何使用Ubuntu online account API创建微博HTML5申请书
在这篇文章中.我们将使用Ubuntu SDK提供online account API来訪问微博的API并显示所须要的内容.这篇文章的重点是展示怎样在HTML 5中使用online account AP ...
- ASP.NET 5 :读写数据库连接字符串
ASP.NET 5 :读写数据库连接字符串 1.概述 ASP.NET 5模板项目配置文件采用了JSON格式,你依然可以采用以前的xml格式.C#对web.config或app.config读写及加密有 ...
- MVC验证06-自定义错误信息
原文:MVC验证06-自定义错误信息 本文体验自定义错误信息. 系统默认的错误信息 在"MVC验证02-自定义验证规则.邮件验证"中,我们自定义了一个验证Email的类.如果输 ...
- POJ 2553 The Bottom of a Graph (强连通分量)
题目地址:POJ 2553 题目意思不好理解.题意是:G图中从v可达的全部点w,也都能够达到v,这种v称为sink.然后升序输出全部的sink. 对于一个强连通分量来说,全部的点都符合这一条件,可是假 ...
- MVC+Bootstrap设计
MVC+Bootstrap) 二 框架设计 文章目录: 一.前言 二.结构图 三.项目搭建 四.代码生成 五.实现接口 六.依赖倒置 七.登录实现 八.最后 一.前言 这个框架是从最近几年做过的项目中 ...