慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

拖鞋酱

变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置 .wrapper div { width:300px; height: 200px; background: orange; -webkit-transform: matrix(1,0,0,1,100,100); transform: matrix(1,0,0,1,100,100); }

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-07-23
拖鞋酱

1、translate(x,y)水平方向和垂直方向同时移动 2、translateX(x)仅水平方向移动 3、translateY(Y)仅垂直方向移动 .wrapper { padding: 20px; background:orange; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2015-07-23
拖鞋酱

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放 2、 scaleX(x)元素仅水平方向缩放 3、 scaleY(y)元素仅垂直方向缩放 .wrapper div:hover { opacity: .5; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8) }

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2015-07-23
拖鞋酱

1、skew(x,y)使元素在水平和垂直方向同时扭曲 2、skewX(x)仅使元素在水平方向扭曲变形 3、skewY(y)仅使元素在垂直方向扭曲变形 .wrapper span { display:block; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); transform:skew(-45deg); }

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2015-07-23
拖鞋酱

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转. -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform:rotate(20deg);

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2015-07-23
julygzz

变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-07-23
海月明

渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-07-22
海月明

为边框应用图片 border-image: border-image:url(borderimg.png) 70 repeat[路劲，切割图片的宽度，图片延伸方式]

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2015-07-22
海月明

color：rgba(R,G,B,A)A为透明度参数，取值在0~1之间，不可为负值。

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-07-22
拖鞋酱

:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始 .wrapper > div:nth-last-of-type(5){ background: orange; }

查看全部

0 采集收起来源：CSS3 nth-last-of-type(n)选择器
2018-03-22
拖鞋酱

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2015-07-22
拖鞋酱

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2015-07-22
julygzz

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateX(x)仅水平方向移动（X轴移动）

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2015-07-22
拖鞋酱

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 .wrapper > div:first-of-type { background: orange; }

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2018-03-22
julygzz

缩放 scale()函数让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2015-07-22

首页上一页 854 855 856 857 858 859 860 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果