文档章节

css3新特性合集

o
 osc_w9s1w4o0
发布于 2019/03/30 21:42
字数 2082
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

转自:https://www.cnblogs.com/xiaoxie2016/p/5964694.html

(若原作者对此转载有疑问,联系删除,谢谢!)

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的选择器

复制代码
1 E:nth-last-child(n) 
 2 E:nth-of-type(n) 
 3 E:nth-last-of-type(n) 
 4 E:last-child 
 5 E:first-of-type 
 6 E:only-child 
 7 E:only-of-type 
 8 E:empty 
 9 E:checked 
10 E:enabled 
11 E:disabled 
12 E::selection 
13 E:not(s)
14 E::not(.s)
15 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 服务端字体案例

复制代码
1 @font-face { 
 2 font-family: BorderWeb; 
 3 src:url(BORDERW0.eot); 
 4 } 
 5 @font-face { 
 6 font-family: Runic; 
 7 src:url(RUNICMT0.eot); 
 8 }
 9 
10 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
11 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
复制代码

 

Word-wrap

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

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

1 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
2 width:200px;background:#ccc;} 
3 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
4 width:200px; background:#ccc;}
1 <div class="clip"> 不显示省略标记,而是简单的裁切条</div>
2 
3 <div class="ellipsis"> 当对象内文本溢出时显示省略标记</div>

 

文本渲染

1 div { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }

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

文本渲染

1 div { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }

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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
极乐技术周报(第十七期)

极乐技术周报 一程序员去面试,面试官问:“你毕业才两年,这三年工作经验是怎么来的?!”程序员答:“加班。” -----燵极乐科技](http://www.dreawer.com/) 1.表单验证系列合集 HTML中的限...

极乐小程序
2019/04/04
3
0
微信应用号开发必备技能都在这里了啦!

“微信应用号”就像平地里炸响的一声春雷,在互联网圈内炸开了锅,小代码小程序即将成为主流,H5迎来了自己的第二春。废话少说,关于微信应用号开发技能,你都掌握了吗? 没掌握的看这里,干...

咖啡
2016/09/23
0
0
蒲公英·凹凸精选期刊:第 01 期

在凹凸有一片蒲公英花田,每当清风拂过,一缕缕白色的蒲公英种子在空中轻盈地飞舞,自由自在,随风飘去。我们总是会抬头仰望,憧憬着它们会生根发芽,开得绚丽烂漫。 又是一年年关将至,马上...

凹凸实验室
01/23
0
0
css3 奇技淫巧 - 如何给小汽车换个背景色谈起

css3 的魅力,不容小觑。曾经被她折服,再度回首,依旧拜倒在她的石榴裙下。相信在未来,她仍然魅力依旧。 站在巨人的肩上学习,不断提升自身实力。 用 CSS 和颜色选择工具更改图片中的颜色,...

osc_vwv0jnr8
2019/02/18
5
0
前端面试考点多?看这些文章就够了

金三银四跳槽季,offer快到碗里来,前端面试考点众多,而网上各个知识点的博客文章又太多,看的眼花缭乱……所以便整理了一下常见知识点的精华文章,每个知识点的文章控制在3篇以内,尽量覆盖...

燕儿199606
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

会议通知 | 2020中国计算与认知神经科学会议

关于大会关于 计算神经科学以神经生物实验为基础,以建立数学模型,开展计算模拟和分析作为基本手段,来刻画和描述大脑的神经活动,探究神经系统各种复杂活动和认知功能包括注意、学习、记忆...

脑机接口社区
06/02
7
0
大神分享快3怎么算下期和值

大神分享快3怎么算下期和值{叩67790572}使用的标签:constructor-arg标签出现的位置:bean标签的内部标签中的属性type:用于指定要注入的数据的数据类型,该数据类型也是构造函数中某个...

yiren081
15分钟前
13
0
Matlab系列之运算符和标点符号的功能介绍

本来月初就打算接着写的,但是电脑不小心进水,主板什么的都废了,周末才找时间拿去修好,心塞。 就不多讲太多废话了,开始分享今天的内容,对MATLAB的运算符做个介绍,然后再对标点符号进行...

狂人V
07/06
3
0
Java源码系列(1):Comparable和Comparator的区别

在讲Comparable和Comparator区别之前,先补充一个知识点。 先看代码: Person类 1public class Person<T> { 2  private T id; 3 4  public T getId() { 5    return i...

学习Java的小姐姐
2018/09/19
19
0
ThreadPoolTaskScheduler手写调度中心

先贴一个自己写的demo把,原理其实就是这样的。 CronTrigger这个类可以将cron表达式转换成Date,可以查看schedule源码学到不少东西,下面代码就是转换成下一执行时间。 public Date nextEx...

朝如青丝暮成雪
36分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部