慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

web端大神

变形--位移 translate() 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） translate中的百分比是针对自己而言的，实现居中先要绝对定位在父元素的50%处

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-07-30
web端大神

1.使用结构伪类选择器:nth-of-type()给每个列表定义不同的背景颜色 2.使用伪元素::after制作圆形效果 3.给每个缩略图设置不同的图片使用伪结构选择器:nth-of-type()，并且配合::after 2、给每个缩略图添加透明度蒙板效果提示：使用伪类选择器::before给缩略图添加蒙板效果 3、鼠标悬浮在缩略图上时，修改缩略图上蒙板的透明度提示：通过:hover和::before配合修改opacity的值为0 4、点击缩略图，切换背景图片提示：通过目标选择器:target进行背景图片的切换 5、控制不是被点击图片的层级大小，让其不显示提示：通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示

查看全部

0 采集收起来源：切换背景图像综合练习题
2016-07-30
chencw111

总结下，CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property duration timing-function delay; animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2016-07-29
慕标7744789

挺有用

查看全部

0 采集收起来源：CSS3选择器属性选择器
2016-07-29
web端大神

变形--缩放 scale() -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5);

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-07-29
web端大神

变形--扭曲 skew() -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg); } x为正逆时针，为负逆时针

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2016-07-29
web端大神

变形--旋转 rotate() -webkit-transform: rotate(45deg); transform: rotate(45deg);

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-07-29
web端大神

变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 HTML代码： <div class="wrapper"> <div></div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border: 1px dotted red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2018-03-22
qq_helloEVERYDA_0

<form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" /> </div> </form> input[type="text"]:enabled { background: #ccc; border: 2px solid red; }http://img1.sycdn.imooc.com//5335299700015e3403000084.jpg 不明白为什么给input[type="text"]设置样式却只有一个输入框显示，两个input标签都同样的type类型，不解？ b

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
web端大神

:enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 input[type="text"]:enabled { background: #ccc; border: 2px solid red; }

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
web端大神

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2016-07-29
web端大神

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 .post p:only-child { background: orange; }

查看全部

0 采集收起来源：CSS3 only-child选择器
2016-07-29
web端大神

:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。 CSS代码： .wrapper > p:nth-last-of-type(3){ background: orange; }

查看全部

0 采集收起来源：CSS3 nth-last-of-type(n)选择器
2018-03-22
web端大神

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

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2016-07-29
web端大神

: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)选择器
2016-07-29

首页上一页 465 466 467 468 469 470 471 下一页尾页

0/150

提交

取消

开始学习

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

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