为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
十天精通CSS3_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 十天精通CSS3

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • cmy91816
    x轴右、Y轴下为正方向
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2015-04-20

  • qq_LIU_0
    text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-04-20

  • lingyun
    当“transition-property”属性设置为all时，表示的是所有中点值的属性。 用一个简单的例子来说明这个问题： 假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-04-20

  • lingyun
    CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 transition-timing-function:(下面是此属性的值) linear： 线性过渡。 ease： 平滑过渡。 ease-in： 由慢到快。 ease-out： 由快到慢。 ease-in-out： 由慢到快再到慢。 如果提供多个属性值，要用逗号进行分隔
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-04-20

  • Moirai
    @·变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-04-20

  • Moirai
    @·::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} 当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。 关键代码分析： .effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } 上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。
    查看全部
    0 采集 收起 来源：CSS3选择器 ::before和::after

    2018-03-22

  • EElili
    动画--过渡属性 transition-property 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果 当不设置中点值时，默认为all 当“transition-property”属性设置为all时，表示的是所有中点值的属性。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-04-20

  • EElili
    变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-04-19

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

    2015-04-19

  • EElili
    缩放 scale()函数 让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2015-04-19

  • EElili
    扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2015-04-19

  • EElili
    旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2015-04-19

  • EElili
    “: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-04-19

  • EElili
    first-of-type选择器 1、与first-child类似，与first-child的区别在于：用来定位父元素下面某个特定类型的第一个子元素
    查看全部
    0 采集 收起 来源：CSS3 first-of-type选择器

    2015-04-19

  • EElili
    结构性选择器-nth-last-child(n) 与nth-child类似，作用上有区别，:nth-last-child()指的是： 某个父元素从最后一个子元素开始计算来选择特定特定子元素
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-last-child(n)

    2015-04-19

首页上一页989990991992993994995下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么？
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程