CSS系列篇:CSS3的常见属性

html-css019

CSS系列篇:CSS3的常见属性,第1张

过渡使用 trainsition 属性,让元素的样式变化,不再瞬间完成,而是可以设定时间,在时间段内逐渐完成。

对单独的div元素做分别做设置进行属性说明:

1、设置在3秒内完成颜色的变化

2、可以分别对不同的属性分开做时间长度的设定,记得用逗号隔开

3、延迟delay:想在某个属性开始执行样式变化后的多少秒,才让另一个属性开始进行样式的动态变化,就可以使用延迟。用法就是:

2s 1s width ,意思就是在高度开始发生变化后的1s后,width的宽度才开始展现变化,然后在2s内完成宽度从30px到60px的变化。

delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果

3、变化的速度:默认不设定,就是逐渐放慢的,默认值是ease

还可以额外指定设置:

linear:匀速

ease-in:加速

ease-out:减速

上述的三个情况,可以综合写为:

对应的变化就是,div的宽度瞬间变化为60px,然后高度在宽度变化后的1s之后才开始发生变化,在3秒内逐渐加速完成。

重点:

兼容性:各大浏览器基本已经支持无前缀的transition,所以可以直接使用不加前缀;

transition的变化设置,是只对有明确数值设置变化的,对于none,block这类的文字描述无效;

有效性:transition是一次性的,无法重复,除非反复触发。

1、相比于过渡属性transition的设置,动画animation的实现支持更为复杂的动态样式效果。

对单独的div元素做分别做设置进行属性说明:

1、使用animation动画属性,最重要的就是配合有“关键帧”——@keyframes

样式设置如下:

这样的设置,就是将1s分为3帧,每帧显示不同的背景颜色,然后动画效果只显示1次。

注意动画执行完成之后,就恢复元素原来定义的样式设置,如果原来没有这个样式的定义,那也是动画执行完成后恢复没有的状态。

@keyframes的写法比较松泛:

0%等同于from,100%等同于to:

如上面的写法就等同于:

下面的关键帧的写法也是有效的:

当然,(1)也是有延迟效果的设置:设置延迟多少秒后执行动画

(2)每帧之间是平滑过渡的,当然也可以设置为分步过渡,这样就有卡顿的效果:

解释:该动画,在停留1秒后开始执行,执行3次,每次执行时间为2秒,在2秒时间执行完成rainbow定义的关键帧样式,然后分步执行,有卡顿效果。

2、动画持续:动画效果默认只播放一次,加入infinite关键字,可以让动画无限次播放

3、指定动画播放的次数,直接写数值:

4、如果想要让动画结束后,停留在结束状态的样式,而不是默认变为起始状态,就可以添加关键字:

animation-fill-mode属性:

none:默认值,回到动画没开始时的状态

forwards:让动画停留在结束状态

backwards:让动画回到第一帧的状态

4、如果想要将帧数的设置,反向执行,就可以使用animation-direction属性:

normal:动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放

reverse:动画执行,先从结束帧的样式执行跳回到起始帧的样式。例如:

所有的transform属性设置,都不会改变元素占据的位置,还是保留的

1、旋转rotate

通过rotate设置旋转角度,来旋转元素

以div元素为例:

···

<body>

<div class="transform"></div>

</body>

···

2、位移translate

设置X轴、Y轴方向的位移值

设置X轴方向的位移值

设置Y轴方向的位移值

3、缩放scale

设置元素水平方向和垂直方向同时缩放

设置元素水平方向缩放

设置元素垂直方向缩放

只设置一个参数,设置元素水平方向和垂直方向,同一比例同时缩放

4、扭曲:skew,设置元素的平面XY轴的扭曲角度

设置元素X轴,Y轴的扭转角度

只设置一个参数,元素X轴,Y轴的扭转角度相同

设置元素X轴的扭转角度

设置元素Y轴的扭转角度

css样式表中字型加粗的属性是什么?

字型加粗

font-weight 属性设定文字的粗细。

使用 bold 关键字可以将文字设定为粗体。

关键字 100 ~ 900 为字型指定了 9 级加粗度。如果一个字型内建了这些加粗级别,那么这些数字就直接对映到预定义的级别,100 对应最细的字型变形,900 对应最粗的字型变形。数字 400 等价于 normal,而 700 等价于 bold。

如果将元素的加粗设定为 bolder,浏览器会设定比所继承值更粗的一个字型加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

CSS字型加粗的方法:

font-weight 属性设定文字的粗细。使用 bold 关键字可以将文字设定为粗体。

例如:

:

<p>字型加粗</p>

css:

p{

font-weight:blod

}

css中font样式常用的使用方法:

font-style:规定字型样式

font-weight:规定字型粗细

font-family:规定字体系列

两种方法给字型加粗,一种就是直接用<b>标签,例如 : <b>粗</b>

或者用css新增样式  <div class="page_speeder_909503540">加粗 </div>

可以用的值有下面这些。400 等同于 normal,而 700 等同于 bold。

normal   预设值

bold   定义粗体字元

bolder   定义更粗的字元

lighter   定义更细的字元

100

200

300

400

500

600

700

800

900

java awt 中加粗前字型的属性是什么

是jdk中已有的方法 一般如果是自己定义的函式名的话 不要使用jdk中已有的 会混淆

DW中字型加粗的程式码是?

实现方法1:

<font class="page_speeder_1274502367">加粗</font>

实现方法2:

<b>加粗</b>

实现方法3:

<strong>加粗</strong>

vf中给LABEL中字型加粗的控制元件是什么

在label的属性中有一项是是否设定为粗体的属性,就是fontbold属性

CSS样式表所有的属性药备注

找一个css手册来看会比较全面,例如:CSS2.0.chm 另外要多去写。

在CSS样式表中为什么filter属性不能用?

filter类似的滤镜火狐是不支援的,

只有IE支援他。

想实现类似的功能,需要使用其他手段~~

字型加粗的HTM CSS程式码

<span class="page_speeder_710819444">加粗演示</span>

如果使用class css样式要 .class{

属性名字:属性值

如果使用id,css样式要 #id{

display:inline;

color:blue;