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 却都能 ...
随机推荐
- HTML文档中应用css样式的方法总结
在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...
- ASPNETPager常用属性
<webdiyer:AspNetPager ID="pager" runat="server" class="page" FirstP ...
- jQuery性能优化38建议---最引人注目的用户体验!
一.需要注意的是的定义jQuery当变量被添加varkeyword 然而,这并不jQuery.整个javascript开发过程,所有需要注意,一定不要将其定义为下面的示例: $loading = $( ...
- Cocos2d-android游戏引擎-介绍
一.游戏引擎概念 什么是游戏引擎 游戏引擎是指一些已编写好的可编辑游戏系统或者一些交互式实时图像应用程序的核心组件.这些系统为游戏设计者提供各种编写游戏所需的各种工具,其目的在于让游戏设计 ...
- Hadoop与HBase中遇到的问题(续)java.io.IOException: Non-increasing Bloom keys异常
在使用Bulkload向HBase导入数据中, 自己编写Map与使用KeyValueSortReducer生成HFile时, 出现了以下的异常: java.io.IOException: Non-in ...
- 关于重写ID3 Algorithm Based On MapReduceV1/C++/Streaming的一些心得体会
心血来潮,同时想用C++连连手.面对如火如荼的MP,一阵念头闪过,如果把一些ML领域的玩意整合到MP里面是不是很有意思 确实很有意思,可惜mahout来高深,我也看不懂.干脆自动动手丰衣足食,加上自己 ...
- 枚举 UIButton补充
一.URL 1.什么是URL? URL是某个资源的唯一路径,通过这个路径就能访问对应的资源 2.URL的组成 协议头://全路径 * 协议头就代表资源的类型,比如http代表网络服务器资源,ftp代表 ...
- Spring之使用Annotation注解开发项目
我们也可以使用Annotation来实现注入操作,提高我们写代码的灵活性和效率.spring中要使用annotation,需要在配置文件中增加: <beans xmlns="http: ...
- Milo的游戏开发的一些链接资料
http://www.cnblogs.com/miloyip/default.aspx?page=1 http://www.cnblogs.com/miloyip/archive/2010/06/14 ...
- SqlDataReader的关闭问题
原文:SqlDataReader的关闭问题 昨天一个朋友使用Repeater绑定数据源时,老是出现"阅读器关闭时尝试调用 FieldCount 无效."错误. 我看了他的代码,使用 ...