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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 梦想的天空
    CSS3 浏览器兼容性问题： 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2015-10-12

  • noodleko
    animation-name: changeColor; animation-duration: 5s; animation-timing-function: ease-out; animation-delay: .1s;
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放时间

    2015-10-11

  • noodleko
    Keyframes 被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes wobble { 0% { margin-left: 100px; background:green; } 40% { margin-left:150px; background:orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } div { width: 100px; height: 100px; background:red; color: #fff; } div:hover{ animation: wobble 5s ease .1s; }
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2015-10-11

  • noodleko
    transform-origin 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 top=top canter=center top right=''='' bottom== left== center= top left=left top right top=top left bottom right= bottom left=
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-10-11

  • noodleko
    matrix() 矩阵 如果只表示偏移，matrix只要关注参数e和f就好，前面几个参数大家随意；如果表示缩放，则只关注参数a和d，a表示x轴，d表示y轴缩放；如果表示旋转，abcd分别表示cosθ,sinθ,-sinθ,cosθ；拉伸就用到b,c两个参数，分别表示tan(x)和tan(y)。说实话。。这很复杂啊。不过用martix才可以实现高端大气上档次的效果啊！
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-10-11

  • noodleko
    translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2015-10-11

  • noodleko
    -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); 垂直水平居中
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2015-10-11

  • noodleko
    scale()缩小/放大 基本同skew scale（）里只有一个参数时，表示x、y倍数一样
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2015-10-11

  • noodleko
    Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2015-10-11

  • noodleko
    .wrapper span { display:block; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform:rotate(20deg); } 旋转 正数顺时针 负数逆时针
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2015-10-11

  • noodleko
    :read-write选择器 “:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
    查看全部
    0 采集 收起 来源：CSS3选择器 :read-write选择器

    2015-10-11

  • noodleko
    :read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
    查看全部
    0 采集 收起 来源：CSS3选择器 :read-only选择器

    2015-10-11

  • noodleko
    ::selection选择器 被选中的文字默认是蓝底白字 ::selection可以改变被选中文字的样式 例 ::selection{ background:orange; color:white; } 变为：橙底白字
    查看全部
    0 采集 收起 来源：CSS3选择器 ::selection选择器

    2015-10-11

  • noodleko
    :enabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 input[type="text"]:enabled { background: #ccc; border: 2px solid red; }
    查看全部
    0 采集 收起 来源：CSS3选择器 :enabled选择器

    2018-03-22

  • noodleko
    “:only-of-type”选择器 用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
    查看全部
    0 采集 收起 来源：CSS3 only-of-type选择器

    2015-10-11

首页上一页738739740741742743744下一页尾页

举报

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

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

查看已购买的课程