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

十天精通CSS3

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

    2015-01-13

  • TraJoe_Wu
    matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-01-13

  • TraJoe_Wu
    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-01-13

  • TraJoe_Wu
    缩放scale()函数让元素根据中心原点对对象进行缩放。 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2015-01-13

  • TraJoe_Wu
    扭曲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-01-13

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

    2015-01-13

  • 深秋色
    column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 语法规则：column-rule: 2px dotted green; 类似于border:1px solid red; column-rule-style: 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2015-01-13

  • 青春永驻心间
    动画--过渡属性 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; }演示结果: 鼠标移入 鼠标移出 特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2018-03-22

  • SummerV3
    border-radius
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-01-13

  • SummerV3
    CSS 实心圆和实心半圆
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-01-13

  • BabyfaceBob
    有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？ 第一，使用HTML5 Doctype和相关指南； 第二，重置好你的样式（reset.css）； 第三，一个简单的有语义的核心布局； 第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。 使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。
    查看全部
    0 采集 收起 来源：Responsive布局技巧

    2015-01-13

  • zoeblow
    跨列。。。column-span:all
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-01-13

  • zoeblow
    column-rule:2px solid #CCCCCC; 列边框
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2015-01-13

  • zoeblow
    列间距：column-gap:2em
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2015-01-13

  • zoeblow
    column-count:4
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-count

    2015-01-13

首页上一页1145114611471148114911501151下一页尾页

举报

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

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

查看已购买的课程