电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

古今中外关于css3的新特性

2021-01-27 23:34:07 出处:[ 菜菜电脑网 ] 人气:次阅读
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 则设置或检索当当前行大约指明Pardosa
器的边界时如何揭示

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 <p class="clip"> 不揭示省略标记,而是最简单的修剪条</p>2 3 <p class="ellipsis"> 当对象内文本溢时标示出省略标记</p>

文本位图

1 p { 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 p { 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%; 扩大图片至所选的大小,百分比是相对Pardosa 计有元素的尺寸

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-letterE:first-line/E::first-lineE:before/E::beforeE:after/E::afterE::placeholderE::selection
E:not(s)E:rootE:last-childE:only-childE:nth-child(n)E:nth-last-child(n)E:first-of-typeE:last-of-typeE:only-of-typeE:nth-of-type(n)E:nth-last-of-type(n)E:emptyE:checkedE:enabledE:disabledE:target

属性选择器
E[att^="val"]可选择带有att属性且属性值为以val标题的字符串的E元素
E[att$="val"]必需较强att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]同样较强att属性且属性值为举例来说val的字符串的E元素

【就其引荐】

1. CSS3免费视频教程

2. 互动一个CSS3的动画库

3. CSS3努力学习之Animation成文

4. CSS3教学之动画制作深造

5. 详细分析关于CSS3中升级的特性

以上就是古今中外关于css3的新特性的简略内容,更多劝瞩目php中文网其它关的文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152