慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

serena_mc

“: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-05-07
serena_mc

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

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2016-05-07
serena_mc

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-last-child(n)
2016-05-07
serena_mc

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2016-05-07
UFO2015

<div class="test"> -webkit-transition-property: width; transition-property: width; -webkit-transition-duration:.5s; transition-duration:.5s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: .18s; transition-delay:.18s; </div> <div class="test"> webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s; </div>

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2018-03-22
UFO2015

动画--过渡属性 transition-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间先来看transition-property属性 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有： HTML: <div></div> CSS: div { width: 200px; height: 200px; background-color:red; margin: 20px auto; -webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s; } div:hover { background-color: orange; }

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2018-03-22
夏至_未至_03217438

区别，在CSS3中的变形，如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替。 matrix(长度缩放，y轴扭曲，x轴扭曲，宽度缩放，x位移，y位移) Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y); Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0); Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0) Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)

查看全部

1 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-05-06
夏至_未至_03217438

在translate例子中：position的top:50%;left:50%;是相对于界面宽高的。 translate的-50%,-50%是相对于div本身宽高的。相当于先将div左上角居中(位于大屏幕中心的)，再将div中心点居中（与大屏幕中心点居中）。

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-05-06
夏至_未至_03217438

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-05-06
夏至_未至_03217438

块级元素才能进行rotate旋转

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-05-06
明天又太阳

用图片设置边框样式：<br> <br> border-image:<br> #border-image {<br> width:170px;<br> height:170px;<br> border:70px solid;<br> border-image:url(url) 70 round;<br> }<br> Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）； Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2018-03-22
明天又太阳

1.边框阴影：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 2.如果需要添加内阴影用inset(不添加inset则默认为外阴影) 3.注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-05-06
明天又太阳

实心左半圆： div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 0 0 50px; } 四个参数从左上角开始，顺时针开始走。

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-05-06
张帅哥

.clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
浅翔灬

选择器

查看全部

0 采集收起来源：CSS3选择器属性选择器
2016-05-06

首页上一页 539 540 541 542 543 544 545 下一页尾页

0/150

提交

取消

开始学习

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

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