1. 首页
  2. 前端

css3技术中常用属性使用详解与实例分析

一.CSS3 圆角

使用 CSS3 border-radius 属性,允许你设置元素的外边框圆角,当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。

语法:border-radius:<length>{1, 4}/<length>{1, 4}

解释:border-radius是一种缩写写法. 如果/前后的值都存在,斜杠前可以有1-4个值,斜杠后也可以有1-4个值,斜杠前面的值为水平半径,后面的值为垂直半径。如果没有/,则水平和垂直的值相等. 顺序是按照top-left、top-right、bottom-right、bottom-left排列的。

如果你要在四个角上一一指定,存在如下几种情况:

1.当只设置一个值时

如果不存在斜杠/时,top-left、top-right、bottom-right、bottom-left四个值相等, 并且水平半径和垂直半径也相同;

如果存在斜杠/时,top-left、top-right、bottom-right、bottom-left四个值相等, 但是水平半径和垂直半径不相同;

如下图效果:

只有一个值10px
只有一个值,带”/”10px/40px

上图的border-radius的值分别为:

<div style="border-radius: 10px;"></div>
<div style="border-radius: 10px/40px;"></div>
2.当只设置二个值时

设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值。如下图效果:

10px 40px
10px 40px/40px
20px 40px/20px 40px
<div style="border-radius: 10px 40px;">10px 40px</div>
<div style=" border-radius: 10px 40px/40px;">10px 40px/40px</div>
<div style=" border-radius: 10px 40px/10px 40px;">20px 40px/20px 40px</div>
3.当只设置三个值时

如果有三个值,其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right,如下图效果:

10px 40px 60px
10px 40px 60px/40px
10px 40px 60px/10px 40px 60px
<div style=" border-radius: 10px 40px 60px;"> 10px 40px 60px </div>
<div style=" border-radius: 10px 40px 60px/40px;"> 10px 40px 60px/40px </div>
<div style=" border-radius: 10px 40px 60px;"> 10px 40px 60px/10px 40px 60px </div>
4.当只设置四个值时

如果有四个值,其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left。如下图效果:

10px 40px 60px 80px
10px 40px 60px 80px/40px
10px 40px 60px 80px/10px 40px 60px
10px 40px 60px 80px/10px 40px 60px 80px
<div style="border-radius: 10px 40px 60px 80px;">
     10px 40px 60px 80px
</div>
<div style="border-radius: 10px 40px 60px 80px/40px;">
     10px 40px 60px 80px/40px
</div>
<div style="border-radius: 10px 40px 60px 80px/10px 40px 60px;">
     10px 40px 60px 80px/10px 40px 60px
</div>
<div style="border-radius: 10px 40px 60px 80px/10px 40px 60px 80px;">
    10px 40px 60px 80px/10px 40px 60px 80px
</div>

二.CSS3 背景渐变

css3中的渐变(gradients),可以实现超炫的图形样式效果,可以减少下载的时间和宽带的使用,同时,可以设置渐变的方位和角度,从而灵活的对样式进行控制。渐变分为线性渐变和径向渐变两种,它们的语法如下:

  • 线性渐变:linear-gradient
语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

实例如下:

1. background-image: linear-gradient(#00d4ff, #8d00ff);
2. background-image: -webkit-linear-gradient( right, #00d4ff, #8d00ff);
3. background-image: linear-gradient(to left top,
         #00d4ff 0%,
         #00d4ff 25%,
         #8d00ff 25%,
         #8d00ff 50%,
         #00d4ff 50%,
         #00d4ff 75%,
         #8d00ff 75%,
         #8d00ff 100%);

注:当不指定方向时,默认是从上往下进行渐变。当指定方向时,会从指定的方向进行渐变。
当方向中有“to”时,不需要加“ -webkit-”前缀。
当方向中省略了to时,必须要加前缀“ -webkit-”。
也可以给每部分渐变指定渐变范围。

  • 角度渐变:linear-gradient

如果想要在渐变的方向上做更多的控制,可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。

语法:background-image: linear-gradient(angle, color-stop1, color-stop2);

css3技术中常用属性使用详解与实例分析

角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 – x = y 其中 x 为标准角度,y为非标准角度。

实例如下:

background-image: linear-gradient(0deg, red, yellow);
background-image: linear-gradient(45deg, red, yellow);
background-image: linear-gradient(90deg, red, yellow);
background-image: linear-gradient(180deg, red, yellow);
  • 重复的线性渐变:repeating-linear-gradient

repeating-linear-gradient() 函数用于重复线性渐变,实例如下:

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); 
background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); 
background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
  • 径向渐变:radial

径向渐变指从一个中心点开始沿着四周产生渐变效果。
必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

语法:background-image:radial-gradient(position ,shape size,start-color,stop-color);

说明:

position:定义圆心位置 position用于定义径向渐变的圆心位置,属性值跟background-position属性值相似,也有2种情况:
a.长度值,如px、em或百分比等;
b.关键字。
shape size

可选参数

由2个参数组成,shape定义形状(圆形或椭圆),size定义大小;
shape形状:形状值有circle(圆形)和ellipse(椭圆)。
size大小:size主要用于定义径向渐变的结束形状大小,值有:

  1. closet-side(指定径向渐变的半径长度为从圆心到离圆心最近的边),
  2. closest-corner(指定径向渐变的半径长度为从圆心到离圆心最近的角),
  3. farthest-side(指定径向渐变的半径长度为从圆心到离圆心最远的边),
  4. farthest-corne(指定径向渐变的半径长度为从圆心到离圆心最远的角)。
start-color和stop-color

必选参数

start-color:定义开始颜色值;
stop-color:定义结束颜色值;
径向渐变可以有多个颜色值,但颜色至少为2个,颜色可以为关键词、十六进制颜色值、RGBA颜色值等。
径向渐变也接受一个颜色值列表,用于同时定义多种颜色的径向渐变

实例如下:

1.颜色结点均匀分布(默认均匀分布)

background-image:-webkit-radial-gradient(red,orange,yellow,#03d603);

2.颜色结点不均匀分布

background-image: radial-gradient(red 5%, yellow 15%, #03d603 60%);

3.设置形状(默认值是 ellipse,即椭圆)

background-image: radial-gradient(circle, red, yellow, #03d603);

4.重复的径向渐变(epeating-radial-gradient() 函数用于重复径向渐变)

 background-image: repeating-radial-gradient(red, yellow 10%, #03d603 15%);
  • 兼容IE5-8渐变:filter: progid:DXImageTransform.Microsoft.gradient

对于不支持渐变的IE5-8浏览器,我们可以使用滤镜filter来实现渐变。

语法:filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#41caf4, endColorstr=#5399f6);
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。
startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。

IE透明度:

语法:filter:alpha(opacity=100);/*IE6~IE8*/
其中各个参数的含义如下:
opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。

注:
1.对于径向渐变,如果没有确定位置,则位置位于center位置;如果没有确定大小,直径为原点到最远角的距离(farthest-corner)。
2.为了实现浏览器的兼容,建议加上内核前缀,如:-webkit-,-moz-,-o-,-ms-。
3.若兼容IE6-8的透明度和渐变,可以使用filter滤镜来实现。

三.2D转换

通过css3的转换属性,我们可以对元素进行移动、缩放、转动、拉长或拉伸等操作,转换的效果是让某个元素改变形状,大小和位置发生一定的变化。

关于2D切换的属性有:

属性名 语法和用法
transform transform:methodName();
transform用于2D或3D转换的元素
transform-origin 改变被转换元素的位置
transform-origin: x-axis y-axis;
x-axis:X轴的基点位置,可取的值:left、center、right、length、%
y-axis:Y轴的基点位置,可取的值:top、center、bottom、length、%

1.移动:translate() 方法

translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

 transform: translate(50px,0px);
-ms-transform: translate(50px,0px); /* IE 9 */
-webkit-transform: translate(50px,0px); /* Safari and Chrome */

上图,当鼠标移到蓝色块儿上时,蓝块儿从左边元素移动50个像素,并从顶部移动0像素。

2.旋转:rotate() 方法

rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */

上图,当鼠标移到蓝色块儿上时,rotate值(30deg)元素顺时针旋转30度。

3.缩放:scale() 方法

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴),参数值为倍数

 -ms-transform:scale(2,1.2); /* IE 9 */
-webkit-transform: scale(2,1.2); /* Safari */
transform: scale(2,1.2); /* 标准语法 */

scale(2,1.2)转变宽度为原来的大小的2倍,高度为原来的1.2倍。

4.倾斜:skew(angle,angle) 方法

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜

  • skewX(<angle>);表示只在X轴(水平方向)倾斜。
  • skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

skew(30deg,20deg) 元素在X轴和Y轴上倾斜角度分别为20度和30度。

5.矩阵:matrix(a,b,c,d,e,f) 方法

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能,该函数通过传不同的参数来实现上面所有的功能。
关于矩阵的知识,不在此过多阐述,有兴趣的可以自行研究。

注:由于兼容性问题,建议在属性前加上内核前缀,-webkit-, -ms- 或 -moz- 。
由于2D转换对IE的支持为IE10以上,因此IE9 要求前缀 -ms- 版本。

四.3D转换

2D转换是基于平面方向上的图形转换,3D是在2D的基础上增加了Z轴方向,使其具有空间感。3D转换中的属性除了拥有2D的属性外,还增加了下面常用的属性:

属性名 语法和用法
transform-style 规定被嵌套元素如何在 3D 空间中显示
perspective  perspective: number|none;
规定 3D 元素的透视效果
perspective-origin perspective-origin: x-axis y-axis;
规定 3D 元素的底部位置

方法如下:

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4×4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

其具体用法和2D中的使用方法类似,只是增加了Z轴方向上的参数,这里不再赘述。

五.CSS3过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的动态效果。要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。
语法:
transition  transition-property   ||   transition-duration   ||  transition-timing-funciton   ||   transition-delay 

CSS3过渡属性如下:

属性 描述
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
取值如下:
linear: 表示匀速过渡;
ease: 默认值,表示过渡的速度先慢,再快,最后非常慢;
ease-in: 表示过渡的速度先慢,后越来越快,直至结束;
ease-out: 表示过渡的速度先快,后越来越慢,直至结束;
ease-in-out: 表示过渡的速度在开始和结束时都很慢;
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果,其中的四个参数为从0到1的数字。
transition-delay 规定过渡效果何时开始。默认是 0。

实例动画效果如下:

<div class="translate">&lt;/div>
.translate{
background-color:#8d00ff;
height: 100px;
width: 200px;
border-radius: 8px;
transition: width 1s,height 1s,background-color 1s,transform 1s,border-radius 2s;
}
.translate:hover{
width:200px;
height:200px;
background-color:#f00;
transform: rotate(30deg);
border-radius: 100px;
}

上面案例,在hover中写要达到的最终形状,在原本类中写初始的形状和过渡动画属性transition。
属性前加上内核前缀,-webkit-, -ms- 或 -moz- 解决兼容性问题。

六.CSS3动画

在css3中,@keyframes规则可以使用来创建动画,创建动画是通过逐步改变从一个CSS样式到另一个CSS样式。在动画过程中,您可以更改CSS样式,设定多次,指定在变化时、发生时使用%,或关键字”from”和”to”,这是和0%到100%相同,0%是开头动画,100%是当动画完成。
为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。
@keyframes规则是css3中新增规则,目前主流浏览器都支持该规则(加浏览器对应的前缀),但不兼容IE 9以及更早版本的浏览器,可以加前缀 -webkit-, -ms- 或 -moz- 。

语法:@keyframes animationName {keyframes-selector {css-styles;}};

属性说明:

  • animationName:定义animation的名称。
  • keyframes-selector:动画持续时间的百分比,可能的值:0-100%、fr、to (和10om (和0%相同)0%相同)。
  • css-styles :一个或多个合法的CSS样式属性。

当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:

  • 规定动画的名称
  • 规定动画的时长

CSS3的动画属性

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1,当为infinite时,则永远播放。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

实例1:

.animation{
width:100px;
height:100px;
background:red;
border-radius: 50px;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;    /*无限循环播放*/
animation-direction:alternate;
animation-play-state:running;
 /*animation: myfirst 5s linear 2s infinite alternate; 简写形式*/
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:#00d4ff; left:200px; top:0px;}
50% {background:#8d00ff; left:200px; top:200px;}
75% {background:yellow; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
未经允许不得转载:码上小站 » css3技术中常用属性使用详解与实例分析

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:在线咨询

邮件:1508488207@qq.com

QR code
隐藏
变装