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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 慕瓜4537511
    1,4参数2,3参数分别设为相反数可实现旋转
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-12-04

  • 慕瓜4537511
    1,4 缩放参数<br> 2,3 扭曲参数<br> 5,6 平移参数
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2018-03-22

  • yanqianduan
    可参考:很好的例子！给背景添加立体阴影效果
    查看全部
    0 采集 收起 来源：CSS3选择器 ::before和::after

    2015-12-04

  • newkunru
    外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
    查看全部
    0 采集 收起 来源：CSS3外轮廓属性

    2015-12-04

  • newkunru
    设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。
    查看全部
    0 采集 收起 来源：Responsive设计（二）

    2015-12-04

  • newkunru
    响应布局/流体布局/网格布局
    查看全部
    0 采集 收起 来源：Responsive设计（一）

    2015-12-04

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

    2015-12-04

  • yanqianduan
    可参考：做单选和复选时可参考
    查看全部
    0 采集 收起 来源：CSS3选择器 :checked选择器

    2015-12-04

  • double木
    变形--位移 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。 HTML代码： <div class="wrapper"> <div>我向右向下移动</div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border: 2px dotted red; margin: 20px auto; } .wrapper div { width: 200px; height: 200px; line-height: 200px; text-align: center; background: orange; color: #fff; -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px); }
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2018-03-22

  • double木
    变形--缩放 scale() 缩放 scale()函数 让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 例如： div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); } 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） HTML代码： <div class="wrapper"> <div>我将放大1.5倍</div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border:2px dashed red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; line-height: 200px; background: orange; text-align: center; color: #fff; } .wrapper div:hover { opacity: .5; -webkit-transform: scale(1.5); -moz-transform:scale(1.5) transform: scale(1.5); } 演示结果 注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2018-03-22

  • double木
    变形--扭曲 skew() 扭曲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轴扭曲变形） 示例演示： 通过skew（）函数将长方形变成平行四边形。 HTML代码： <div class="wrapper"> <div>我变成平形四边形</div> </div> CSS代码： .wrapper { width: 300px; height: 100px; border: 2px dotted red; margin: 30px auto; } .wrapper div { width: 300px; height: 100px; line-height: 100px; text-align: center; color: #fff; background: orange; -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg); }
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2018-03-22

  • double木
    变形--旋转 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

  • yao_Coding
    @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2015-12-04

  • yao_Coding
    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 文字溢出边框时显示省略号
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-12-04

  • yao_Coding
    border-image:rul() 70 round/repeat/stretch 给边框添加图片，一共70个，平铺、重复和拉伸
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-12-04

首页上一页685686687688689690691下一页尾页

举报

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

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

查看已购买的课程