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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • hahaseki
    第二节 调用动画 animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写） 语法： animation-name: none | IDENT[,none|DENT]*; 1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）； 2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。
    查看全部
    0 采集 收起 来源：CSS3中调用动画

    2015-01-29

  • yangshuyun
    跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-01-29

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

    2015-01-29

  • 乌龙猫
    前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2015-01-29

  • Lunay
    multiple backgrounds
    查看全部
    0 采集 收起 来源：CSS3背景 multiple backgrounds

    2015-01-29

  • hahaseki
    第十节 动画--过渡延迟时间 transition-delay transition-delay改变元素属性值后多长时间开始执行。 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“,”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2015-02-25

  • hahaseki
    第九节 动画--过渡函数 transition-timing-function transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： 值　　　　　　　　　描述 linear　　　　　　　 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease　　　　　　　　规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-ezier(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)）。 cubic-bezier(n,n,n,n)　在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡函数 transition-timing-function

    2015-01-29

  • Tenor
    box-shadow（一） 语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量 必须，水平阴影位置，允许为负 Y轴偏移量 必须，垂直阴影位置，允许为负 阴影模糊半径 可选 模糊距离 阴影扩展半径 可选 阴影的尺寸 阴影颜色 可选 阴影的颜色，默认为黑色 投影方式 可选 默认为外阴影，设置成inset为内部阴影 eg：外：box-shadow:4px 4px 6px #666; 内：box-shadow:4px 4px 6px #666 inset; 添加多个阴影：用逗号隔开
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2015-01-29

  • hahaseki
    第八节 动画--过渡所需时间 transition-duration transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡所需时间 transition-duration

    2015-01-29

  • Tenor
    border-radius是向元素添加圆角边框。 使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-01-29

  • hahaseki
    transition-property用来指定过渡动画的CSS属性名称 属性名　　　　　　　　 类型 letter-spacing 　　　 length line-height 　　　　 number, length, percentage margin-bottom 　　　 length margin-left 　　　　　length margin-right 　　　　 length margin-top 　　　　　 length max-height 　　　　　 length, percentage max-width 　　　　　 length, percentage min-height 　　　　　 length, percentage min-width 　　　　 length, percentage opacity 　　　　　　　number outline-color 　　　 color outline-offset 　　　 integer outline-width 　　　　 length padding-bottom 　　 length padding-left 　　　　　length padding-right 　　　　 length padding-top 　　　　 length right 　　　　　　　 length, percentage text-indent 　　　　　 length, percentage text-shadow 　　　　 shadow top 　　　　　　　　　 length, percentage vertical-align 　　　 keywords, length, percentage visibility 　　　　　　 visibility width 　　　　　　　 length, percentage word-spacing 　　　 length, percentage z-index 　　　　　　　 integer zoom 　　　　　　　　 number
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-02-25

  • hahaseki
    transition-property用来指定过渡动画的CSS属性名称 属性名　　　　　　　　 类型 background-color 　 color background-image 　only gradients background-position percentage, length border-bottom-color color border-bottom-width length border-color 　　　　 color border-left-color 　　 color border-left-width 　 length border-right-color 　 color border-right-width 　 length border-spacing 　　　 length border-top-color 　　color border-top-width 　　 length border-width 　　　　length bottom 　　　　　　 length, percentage color 　　　　　　　　 color crop 　　　　　　　　rectangle font-size 　　　　　　 length, percentage font-weight 　　　　　number grid-* 　　　　　　　various height 　　　　　　　 length, percentage left 　　　　　　　　 length, percentage
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-02-25

  • hahaseki
    第七节 动画--过渡属性 transition-property 就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-01-29

  • hahaseki
    第六节 变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。 通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似，如下表所示： 关键词　　　　　　　　　　　　　　　　　　　百分比 top = top center = center top　　　　　　　　50% 0 right = right center = center right　　　　　　100%或100% 50% bottom = bottom center = center bottom　　50% 100% left = left cneter = center left　　　　　　　　0或0 50% center = center center　　　　　　　　　　　 50%或50% 50% top left = left top　　　　　　　　　　　　　 0 0 right top = top right　　　　　　　　　　　　 100% 0 bottom right = right bottom　　　　　　　　 100% 100% bottom left = left bottom　　　　　　　　　　0 100%
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-01-29

  • _大空benc
    none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果
    查看全部
    0 采集 收起 来源：CSS3中设置动画时间外属性

    2015-01-29

首页上一页1116111711181119112011211122下一页尾页

举报

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

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

查看已购买的课程