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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 凤仪
    动画--过渡函数 transition-timing-function transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： 1.ease：快到慢 2.linear：匀速 3.ease-in：加速(即渐显效果) 4.ease-out：减速(即渐隐效果) 5.ease-in-out：先加速后减速(即渐显渐隐效果) 补充： 正方形变圆形 border-radius:100%; 圆形变正方形 border-radius:0px;
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡函数 transition-timing-function

    2015-03-24

  • 凤仪
    动画--过渡所需时间 transition-duration transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡所需时间 transition-duration

    2015-03-24

  • 凤仪
    动画--过渡属性 transition-property CSS3的过渡transition属性是一个复合属性，主要包括以下几个子属性： 1. transition-property:指定过渡或动态模拟的CSS属性 2. transition-duration:指定完成过渡所需的时间 3. transition-timing-function:指定过渡函数 4. transition-delay:指定开始出现的延迟时间 先来看transition-property属性 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，比如background-color改变会产生动画效果等 特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。 用一个简单的例子来说明这个问题： 假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
    查看全部
    1 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-04-16

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

    2015-03-24

  • 凤仪
    变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。 示例演示：通过matrix()函数来模拟transform中translate(50px,50px)位移的效果。 HTML代码： <div class="wrapper"> <div></div> </div> CSS代码： .wrapper { width: 300px; height: 200px; border: 2px dotted red; margin: 40px auto; } .wrapper div { width:300px; height: 200px; background: orange; -webkit-transform: matrix(1,0,0,1,50,50); -moz-transform:matrix(1,0,0,1,50,50); transform: matrix(1,0,0,1,50,50); } 6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是X方向的像素位移，X方向就是左右，第六个是Y方向的像素位移，Y方向就是上下 更多矩阵参考：http://blog.csdn.net/henren555/article/details/9699449
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2018-03-22

  • 雨中的鱼L
    变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） 实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。 -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px); 注意： 1.translate类似于relative，都是相对于自身原来的位置进行平移 2.本节代码快照的例子--给不知道宽高的div实现水平和垂直居中挺有意思的 position:absolute; top:50%; left:50%;//这3行实现div的左上角位于页面水平垂直居中位置 --------------- -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);//这3行translate实现div在原来的位置向左向上平移自身宽高的50%
    查看全部
    1 采集 收起 来源：CSS3中的变形--位移 translate()

    2015-04-08

  • 凤仪
    变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） 实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。 -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px); 注意： 1.translate类似于relative，都是相对于自身原来的位置进行平移 2.本节代码快照的例子--给不知道宽高的div实现水平和垂直居中挺有意思的 position:absolute; top:50%; left:50%;//这3行实现div的左上角位于页面水平垂直居中位置 --------------- -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);//这3行translate实现div在原来的位置向左向上平移自身宽高的50%
    查看全部
    1 采集 收起 来源：CSS3中的变形--位移 translate()

    2015-03-24

  • 洛雪
    属性选择器 CSS3相对于CSS2新增的3个属性选择器： 1、E[att^="val"] E是标签名，att是属性，val是指属性值以val开头的任何字符串 2、E[att$="val"] E是标签名，att是属性，val是指属性值以val结尾的任何字符串 3、E[att*="val"] E是标签名，att是属性，val是指属性值任意位置包含了val的字符串
    查看全部
    0 采集 收起 来源：CSS3选择器 属性选择器

    2018-03-22

  • 雨中的鱼L
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> <textarea name="comment" id="" cols="30" rows="10" readonly="readonly" placeholder="中国上海"></textarea>
    查看全部
    0 采集 收起 来源：CSS3选择器 :read-only选择器

    2018-03-22

  • 洛雪
    制作导航菜单
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-03-24

  • 雨中的鱼L
    有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
    查看全部
    0 采集 收起 来源：CSS3选择器 ::selection选择器

    2015-03-24

  • 洛雪
    multiple backgrounds 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。 语法缩写如下： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式： background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意： 用逗号隔开每组 background 的缩写值； 如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。
    查看全部
    0 采集 收起 来源：CSS3背景 multiple backgrounds

    2018-03-22

  • 洛雪
    background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
    0 采集 收起 来源：CSS3背景 background-size

    2018-03-22

  • 洛雪
    background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
    0 采集 收起 来源：CSS3背景 background-clip

    2015-03-24

  • 洛雪
    background-origin 设置元素背景图片的原始起始位置。 语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2015-03-24

首页上一页1036103710381039104010411042下一页尾页

举报

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

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

查看已购买的课程