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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • qq_转过身偷笑_0
    从左上角头的影
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（二）

    2017-04-19

  • 嘉熙
    css3设置圆角
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2017-04-19

  • 石头的守望
    呃，写错了单词iteration count
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放次数

    2017-04-18

  • 石头的守望
    自己后面加个-webkit-animation-iteration-count:infinite;就可以无限循环了，有趣
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放时间

    2017-04-18

  • 石头的守望
    还有个前缀兼容问题，加上终于OK了 @-webkit-keyframes changecolor{...} -webkit-animation:changecolor 5s ease .1s;
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2017-04-19

  • 慕UI0103114
    CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性 box-sizing： 在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示： W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”） 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距） 在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2017-04-18

  • 慕UI0103114
    column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ； column-width: auto | <length> 取值说明 属性值 说明 auto 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 <length> 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-width

    2018-03-22

  • 慕UI0103114
    animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。 例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为： animation-direction:alternate; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放方向

    2017-04-18

  • 慕UI0103114
    animation-iteration-count属性主要用来定义动画的播放次数。 语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite，动画将会无限次的播放。 举例： 通过animation-iteration-count属性让动画move只播放5次，代码设置为： animation-iteration-count:5; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放次数

    2018-03-22

  • 慕UI0103114
    animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。 语法： animation-name: none | IDENT[,none|DENT]*; 1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）； 2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。 注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。
    查看全部
    0 采集 收起 来源：CSS3中调用动画

    2017-04-18

  • 慕UI0103114
    Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。 经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2017-04-18

  • 石头的守望
    transition-property:指定过渡或动态模拟的CSS属性； transition-duration:指定完成过渡所需的时间； transition-timing-function:指定过渡函数； transition-delay:指定开始出现的延迟时间； 缩写：transition: CSS属性 过渡所需的时间 过渡函数 开始出现的延迟时间 函数： ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 linear 恒速。 回顾： transform:rotate(10deg);块元素旋转，正值为顺时针旋转，负值为逆时针旋转； transform:skew(Xdeg,Ydeg);块元素扭曲，偏移X轴和Y轴进行扭曲，形状发生改变； transform:scale(x,y);块元素缩放，X轴缩放和Y轴缩放，当值为0.01-0.99表示缩小倍数，当值为1以上则表示放大倍数； transform:translate(Xpx,Ypx);块元素的位移，X轴水平位移和Y轴垂直位移量； transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());矩阵六个值 水平伸缩量，纵向扭曲，横向扭曲，垂直伸缩量，水平偏移量，垂直偏移量 transform-origin:方向;对块元元素原点的改变。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2017-04-18

  • 石头的守望
    transition-property:指定过渡或动态模拟的CSS属性； transition-duration:指定完成过渡所需的时间； transition-timing-function:指定过渡函数； transition-delay:指定开始出现的延迟时间； 缩写：transition: CSS属性 过渡所需的时间 过渡函数 开始出现的延迟时间 函数： ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2017-04-18

  • 石头的守望
    transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());矩阵六个值 水平伸缩量，纵向扭曲，横向扭曲，垂直伸缩量，水平偏移量，垂直偏移量 回顾： transform:rotate(10deg);块元素旋转，正值为顺时针旋转，负值为逆时针旋转； transform:skew(Xdeg,Ydeg);块元素扭曲，偏移X轴和Y轴进行扭曲，形状发生改变； transform:scale(x,y);块元素缩放，X轴缩放和Y轴缩放，当值为0.01-0.99表示缩小倍数，当值为1以上则表示放大倍数； transform:translate(Xpx,Ypx);块元素的位移，X轴水平位移和Y轴垂直位移量；
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2017-04-18

  • 石头的守望
    transform:rotate(20deg);是块元素进行顺时针旋转，不改变块大小形状; transform:skew(45deg,10deg)是块元素进行偏移X轴和Y轴的扭曲角度,形状发生改变。
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2017-04-17

首页上一页252253254255256257258下一页尾页

举报

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

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

查看已购买的课程