为了账号安全,请及时绑定邮箱和手机立即绑定
  • 动画--过渡属性 transition-property 简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一,在默认样式中声明元素的初始状态样式; 第二,声明过渡元素最终状态样式,比如悬浮状态; 第三,在默认样式中通过添加过渡函数,添加一些不同的样式。 CSS3的过度transition属性是一个复合属性,主要包括以下几个子属性: transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 先来看transition-property属性 transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:
    查看全部
  • 变形--原点 transform-origin 任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处 在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
    查看全部
  • 变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素。 matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()); a为元素的水平伸缩量,1为原始大小; b为纵向扭曲,0为不变; c为横向扭曲,0不变; d为垂直伸缩量,1为原始大小; e为水平偏移量,0是初始位置; f为垂直偏移量,0是初始位置
    查看全部
  • css3针对浏览器的私有属性: -webkit chrome和safari -moz firefox -ms IE
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2014-12-19

  • 新增特性
    查看全部
    0 采集 收起 来源:CSS3能做什么?

    2014-12-19

  • 所有CSS3代码都得加上内核..
    查看全部
  • 变形--位移 translate() translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况: 1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) 2、translateX(x)仅水平方向移动(X轴移动) 3、translateY(Y)仅垂直方向移动(Y轴移动) 不知道div的宽高,让div水平垂直都居中的方法是transform:translate(-50%,-50%);
    查看全部
  • 变形--缩放 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轴缩放)
    查看全部
  • 变形--扭曲 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轴扭曲变形);
    查看全部
  • 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。
    查看全部
  • 多列布局模块(CSS Multi Column Layout Module)
    查看全部
  • mark,使用伪元素制作导航分隔线
    查看全部
  • http://www.360doc.com/content/14/1016/13/2792772_417403574.shtml
    查看全部
  • 多重背景,也就是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],... 注意:position应该先left/right后top/bottom,background-size可用多种形式表示。
    查看全部
  • Responsive设计中,令使用设备的宽度为视图的宽度,也就是说禁止其默认的自适应页面的效果,具体设置如下: <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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