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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • halion
    http://dev.oupeng.com/articles/flexbox-basics
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2015-04-30

  • 慕标3752996
    选择后显示特殊效果
    查看全部
    0 采集 收起 来源：CSS3选择器 ::selection选择器

    2015-04-30

  • 小呵呵
    多列布局columns: 200px 2;每列宽度为200px，列数为2 如果多列布局内容元素的父元素宽度是固定的话，即使设置了下面的代码，宽度还是auto效果（自动根据父元素的宽度和列数，判断每一列的宽度是多少） columns: 200px 2;等同于columns: auto 2; auto是默认值 1是默认值 列间距column-gap: 2em;默认值1em，单位可用px em 列之间的分割线column-rule:1px solid black;使用方法类似border 跨列显示，在想跨列的元素上设置column-span:all;
    查看全部
    0 采集 收起 来源：CSS3 多列布局——Columns

    2015-04-30

  • 慕标3752996
    only-child：指定元素中同一级别下 只有自己的情况下，适用only-child
    查看全部
    0 采集 收起 来源：CSS3 only-child选择器

    2015-04-30

  • 心似凉夜
    圆角效果等
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-04-30

  • 林佳树
    圆角效果等
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-04-30

  • 苦逼的存在
    text-shadow可以用来设置文本的阴影效果 text-shadow: X-Offset Y-Offset blur color;
    查看全部
    0 采集 收起 来源：CSS3文字与字体 文本阴影text-shadow

    2015-04-30

  • 小呵呵
    自定义动画（自定义动画名称，每一阶段关键帧的样式） @keyframes changecolor{ 0%{ background: red; } 50%{ background: yellow; } 100%{background: green;} } div {width: 100px;height: 100px; background:red;} div:hover{ animation: changecolor 5s ease .1s infinite normal running forwards;} changecolor 动画的名称，如果没有动画的话，写none（默认值） 其他属性类似transition的属性 infinite的含义是无限次播放此动画，默认值为1，允许有小数，通常为整数 normal（默认值）的含义是每次播放都是从0播放到100这个顺序，alternate含义为交替播放 0播放到100,100播放到0,0播放到100，这样子播放 running（默认值）的含义是动画处于正在执行中，paused含义是暂停动画 动画暂停后，再次开始会从暂停的地方继续 forwards | backwards | none(默认值) | both 浏览器兼容性处理-前缀的加法 @-webkit-keyframes
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2015-04-30

  • 小呵呵
    动画的过渡transition: background-color .5s ease 1s;设置在元素的初始状态上 含义是：1s后执行背景颜色的0.5s动画 元素需要设置动画初始状态和动画结束状态的css样式 第一个值为变化的css样式，可以是单一的，也可以是all，如果是all的话，可以省略不写 all理解：假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。 第二个值为动画执行的时间 第三个值为动画的执行方式 ease快-慢-慢（先加速再减速再减速）默认值 linear匀速 ease-in慢-快（加速） ease-out快-慢（减速） ease-in-out慢-快-慢（先加速后减速） 第四个值为事件触发后多长时间执行动画（一般不常用） 如果说常用的话，用于下面这种情况 transition:width .5s ease-in 1s,height .5s ease-in 1.5s,background .5s ease-in; 这个效果是：背景颜色先执行0.5s完毕后，再过0.5s，width开始执行0.5s，执行完立刻执行height的动画0.5s transition:border-radius .5s ease-in,background-color .5s ease-out;注意这个效果和上面的不一样，这个效果边框和背景色是同时执行的 transform常常搭配transition使用 如果光有transform的话，动画执行是很生硬的，一下子到达了动画的结束点 只有搭配了transition才会有动画的过渡效果
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-05-04

  • 慕小乔
    Keyframes介绍 Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。 经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。 浏览器的支持情况： Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。 案例演示 通过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2015-04-30

  • 小呵呵
    原点设置transform-origin: left top; 默认在元素的正中心，transform的所有变换特效都是围绕这个点实现的 left=left center=center left right=right center=center right top=top center=center top bottom=bottom center=center bottom left top=top left right top=top right left bottom=bottom left right bottom=bottom right 上面都是2D的，如果是3D的话：transform-origin:center bottom 50px; x轴 y轴 z轴 注意：xyz轴都可以用px z轴？？？？？？？？？？？？
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-05-04

  • 小呵呵
    矩阵transform: matrix(1,0,0,1,50,50);等同于transform:translate(50px,50px) 前提是前面几个值为1,0,0,1 3D？？？？？？？？？？？？
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-05-04

  • 心似凉夜
    2n是偶数，2n+1是奇数。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2015-04-30

  • 挚爱欣
    结构性伪类选择器—nth-child(n)
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2015-04-30

  • Flicker
    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2015-04-30

首页上一页971972973974975976977下一页尾页

举报

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

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

查看已购买的课程