animation    IE10

animation的六大属性

animation-name规定需要绑定选择器的keyframe名称

animation-duration规定完成动画所花费的时间 s ms
object.style.animationDuration="3s"

animation-timing-function动画的速度曲线
默认值ease
object.style.animationTimingFunction="linear"
语法 animation-timing-function:value

animation-timing-function使用名为三次Cubic Bezier贝塞尔曲线函数的数学函数,来生成速度曲线 可以使用自己的值也可

以预定义的值

值:linear从始到末以相同的速度
ease 默认 从低速 加快在结束前变慢
ease-in动画低速开始
ease-out动画低速结束
ease-in-out动画从低速开始和结束
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-deplay动画开始之前的延迟
animation-delay: time;
JavaScript 语法:object.style.animationDelay="2s"
animation-delay 值以秒或毫秒计。
允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画

animation-iteration-count动画播放的次数 IE10
animation-iteration-count: n|infinite
JavaScript 语法: object.style.animationIterationCount=3

animation-direction是否应该轮流反向播放动画
animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等

)向后播放
animation-direction: normal|alternate;
JavaScript 语法: object.style.animationDirection="alternate"

默认值 none 0 ease 0 1 normal
javascript的语法 object.style.animation="mymove 5s infinite"

Transition   过渡的四大属性 IE10

transition-property
transiont-property属性规定过渡css属性的名称
transition-property: none|all|propertyCSS 属性名称列表,列表以逗号分隔;
JavaScript 语法: object.style.transitionProperty="width,height"

transition-duration 完成过渡效果需要多少秒或毫秒
transition-duration: time;
JavaScript 语法: object.style.transitionDuration="5s"

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
JavaScript 语法: object.style.transitionTimingFunction="linear"

transition-delay
JavaScript 语法: object.style.transitionDelay="2s"
transition-delay: time;

默认值 all 0 ease 0
transition:property duration timing-function delay
javascript语法:object.style.transition="width 2s"

transform IE10
transform 允许我们对元素进行旋转、缩放、移动、或倾斜
默认none
javascript的语法 object.style.transform="rotate(7deg)"
transform: none|transform-functions;

none 不进行转换
matrix(n,n,n,n,n,n)使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)使用 16 个值的 4x4 矩阵
translate(x,y)2D 转换
translate3d(x,y,z)3D 转换
translateX(x)只是用 X 轴的值
translateY(y)只是用Y轴的值
translateZ(z)只是用Z轴的值
scale(x,y)2D缩放
scale3d(x,y,z)3D缩放
scaleX(x),scaleY(y),scaleZ(z)
rotate(angle) 2D 旋转,在参数中规定角度
rotate3d(x,y,z,angle)3D 旋转
rotateX(angle),rotateY(angle),rotateZ(angle)
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle) skewY(angle) perspective(n)

新增的css3的选择器

 E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:only-child
E:only-of-type
E:empty
E:checked
E:enabled
E:disabled
E::selection
E:not(s)
E::not(.s)
body: nth-child(even), nth-child(odd)/*:此处他们分别代表了表格(tbody)下面的偶数行和奇数行(tr)*/等等......

@Font-face 特性
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体

Font-face 客户端字体案例
<p><font face="arial">arial courier verdana</font></p>

Font-face 服务端字体案例

 @font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
} .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

Word-wrap

设置或检索当当前行超过指定容器的边界时是否断开转行,文字此时已被打散

Text-overflow它与 word-wrap 是协同工作
word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行,而 text-overflow 则设置或检索当当前行超过指定容

器的边界时如何显示

 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
width:200px;background:#ccc;}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
width:200px; background:#ccc;}
 <div class="clip"> 不显示省略标记,而是简单的裁切条</div>

 <div class="ellipsis"> 当对象内文本溢出时显示省略标记</div>

文本渲染

 div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.75px;
}

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

文本渲染

 div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.75px;
}

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

gradient 渐变效果
线性渐变 linear左上(0% 0%)到右上(0% 100%)

background-image:-webkit-gradient(linear,0% 0%,100% 0%,form(red),to(balck))

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

径向渐变radial从一个圆到一个圆的渐变
background:-weblit-gradient(radial,50 50,50,50 50,0,form(black),color-stop(0.5,red),to(blue));

css3的阴影shadow和反射reflect

background-clip:border-box;背景从border开始显示;
background-clip:padding-box
background-clip:content-box
background-clip:no-clip:no-clicp默认属性等同于border-box

background-origin 用于确定背景的位置 通常与background-positon联合使用

background-size来调整背景图片的大小,注意别和 clip 弄混,这个主要用于设定图片本身

background-size: contain; 缩小图片以适合元素(维持像素长宽比)
background-size: cover; 扩展元素以填补元素(维持像素长宽比)
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸

background-break: continuous; 默认值。忽略盒之间的距离(也就是像元 素没有分成多个盒子,依然是

一个整体一 样)
background-break: bounding-box; 把盒之间的距离计算在内;
background-break: each-box; 为每个盒子单独重绘背景

counter()=[counter(name) | counters(name,list-style-type)]{1,}

counter-reset IE8

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。
注释:如果使用 "display: none",则无法重置计数器。如果使用 "visibility: hidden",则可以重置计数器

JavaScript 语法: object.style.counterReset="subsection"

counter-reset的值none id number inherit

attr()=attr(attr-name)插入元素的属性值 IE8

calc() =calc(四则运算) 动态计算长度值 IE9
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;

initial属于css-wide关键字,这表示所有的属性都可以接受该值 IE11

unset 擦除属性声明

颜色值
color color的颜色名称,HEX,RGB,RGBA,HSL,HSLA,transparent,currentColor

currentColor

resolution分辨率值不允许有负值
频率单位包括有: dpi, dpcm, dppx

角度值 angle角度值的正常范围应在[0-360deg]内,例如:-10deg与350deg是等价的
角度单位包括有: deg, grad一个圆共400梯度, rad 一个圆共2π弧度, turn
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

长度值与单位

ch 数字“0”的宽度 ie9

rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
vw相对于视口的宽度。视口被均分为100单位的vw ie9
vh 相对于视口的高度。视口被均分为100单位的vh
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
q 1/4毫米(quarter-millimeters)。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

@import@media@font-face@keyframes@supports

E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholderE::selection

E:not(s)
E:root
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:target

属性选择器
E[att^="val"]选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素

E~F

CSS3 的盒子模型
盒子模型为开发者提供了一种非常灵活的布局方式,但是支持这一特性的浏览器并不多,目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox

未完待续....

CSS3的新特性整理的更多相关文章

  1. HTML5和CSS3的新特性

    html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...

  2. Swift 3到5.1新特性整理

    本文转载自:https://hicc.me/whats-new-in-swift-3-to-5-1/,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有. Hipo 2.0 重写从 Swif ...

  3. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  4. CSS3常用新特性

    CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...

  5. Java JDK1.5、1.6、1.7新特性整理(转)

    原文链接:http://www.cnblogs.com/tony-yang-flutter/p/3503935.html 一.Java JDK1.5的新特性 1.泛型: List<String& ...

  6. CSS3的新特性

    CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...

  7. Java JDK1.5、1.6、1.7新特性整理

    转载请注明出处:http://www.cnblogs.com/tony-yang-flutter 一.Java JDK1.5的新特性 1.泛型: List<String> strs = n ...

  8. php7 新特性整理

    PHP7 已经出来1年了,PHP7.1也即将和大家见面,这么多好的特性,好的方法,为什么不使用呢,也希望PHP越来越好. 在这里整理 PHP 5.1 ,PHP5.2,PHP5.3,PHP5.4,PHP ...

  9. Android 6.0 新特性 整理 资料来自网络

    Android 6.0新特性 Runtime Permissions Doze and App Standby Apache HTTP Client Removal BoringSSL Access ...

随机推荐

  1. JavaScript 系列博客(二)

    JavaScript 系列博客(二) 前言 本篇博客介绍 js 中的运算符.条件语句.循环语句以及数组. 运算符 算术运算符 // + | - | * | / | % | ++ | -- consol ...

  2. ___简单的MVC单个图片上传预览

    js: $("#btnImg").click(function () { $("#form0").ajaxSubmit({ url: "/Studen ...

  3. composer Content-Length mismatch

    今天在执行 :composer update 时一直提示: 本地 package.json如下: { "private": true, "scripts": { ...

  4. spring_04bean的生命周期

    一.前言 spring框架中的bean对象生命周期是面试时常考的问题 往往笔试,面试总喜欢问生命周期的问题 二.spring_bean应用上下文生命周期图: 三.生命周期流程(bean应用上下文): ...

  5. SpringBoot史前简述

    背景 大约20年前,程序员们使用“企业级Java Bean”(EJB)开发企业应用,需要配置复杂的XML. 在二十世纪初期,新兴Java技术——Spring,横空出世.使用极简XML和POJO(普通J ...

  6. Java学习笔记之——构造方法

    构造方法:方法名和类名相同且没有返回值 1.作用 创建对象 对象初始化 2.普通方法的结构 权限修饰符 返回值类型 方法名(形参){ 方法体: } 3. 构造方法的结构 (1)结构 权限修饰符 方法名 ...

  7. 面试官:"谈谈分库分表吧?"

    原文链接:面试官:"谈谈分库分表吧?" 面试官:“有并发的经验没?”  应聘者:“有一点.”   面试官:“那你们为了处理并发,做了哪些优化?”   应聘者:“前后端分离啊,限流啊 ...

  8. Reinforcement Learning: An Introduction读书笔记(2)--多臂机

     > 目  录 <  k-armed bandit problem Incremental Implementation Tracking a Nonstationary Problem ...

  9. mysql zip安装

    管理员运行cmd,进入bin目录1.在my.ini(mysql解压目录下)文件中复制下面内容 [client] port = 3306 [mysql] default-character-set=ut ...

  10. js-string.js

    //小结// string.charAt(pos) 返回string中pos所在位置的字符 var name = "Cynthia"; var i = name.charAt(0) ...