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 却都能 ...
随机推荐
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框 ...
- POJ 2081 Recaman's Sequence(水的问题)
[简要题意]:这个主题是很短的叙述性说明.挺easy. 不重复. [分析]:只需要加一个判断这个数是否可以是一个数组,这个数组的范围. // 3388K 0Ms #include<iostrea ...
- Android - "cause failed to find target android-14" 问题
"cause failed to find target android-14" 问题 本文地址: http://blog.csdn.net/caroline_wendy Andr ...
- 6天通吃树结构—— 第五天 Trie树
原文:6天通吃树结构-- 第五天 Trie树 很有段时间没写此系列了,今天我们来说Trie树,Trie树的名字有很多,比如字典树,前缀树等等. 一:概念 下面我们有and,as,at,cn,com这些 ...
- Android Fragment与Activity之间的数据交换(Fragment从Activity获取数据)
Fragment与Activity之间的数据交换,通常含有3: 一.Fragment从Activity获取数据(仅本文介绍了一个第一): 两.Activity从Fragment获取数据: 三.Frag ...
- ReportNG测试报告模板定制
部分参考:http://tech.it168.com/a2013/0906/1530/000001530755_3.shtml ReportNG提供了简单的方式来查看测试结果,并能对结果进行着色, ...
- 大话设计模式C++达到-文章16章-国家模式
一.UML画画 二.概念 状态模式(State):当一个对象的内在状态改变时同意改变其行为.这个对象看起来像是改变了其类. 三.说明 以下是来自书本和网络的对状态模式的定义和分析: (1)状态模式同意 ...
- 开源 java CMS - FreeCMS2.3员
原文地址:http://javaz.cn/site/javaz/site_study/info/2015/28375.html 项目地址:http://www.freeteam.cn/ 会员注冊 打 ...
- MyEclipse使用总结——MyEclipse文件查找技巧
原文:MyEclipse使用总结--MyEclipse文件查找技巧 一.查找文件 使用快捷键[ctrl+shift+R]弹出弹出文件查找框,如下图所示: 二.查找包含某个字符串的文件 使用快捷键[ct ...
- CSS3+HTML5特效7 - 特殊的 Loading 效果
效果如下 实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...