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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • WYDWYD008
    这课的就看代码快照，上面详细注释，主要运用的心知识就是伪类还有分隔符的写法
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-05-06

  • 慕小乔
    设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒 语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。 案例演示： 制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。 HTML: <div>Hover Me</div> CSS: @keyframes toradius{ from { border-radius: 0; } to { border-radius: 100%; } } div { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #fff; background: green; margin: 20px auto; } div:hover { animation-name: toradius; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: .1s; }
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放时间

    2018-03-22

  • 慕小乔
    调用动画 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中调用动画

    2015-05-06

  • 慕勒0480411
    @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。 比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }
    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2018-03-22

  • 慕勒0480411
    background:url(xx.jpg) 10px 20px no-repeat;
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-05-05

  • 御风天流
    列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明 属性值 属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。 例如：将内容分三列显列，列与列之间的间距为2em，实现代码为： column-count: 3; column-gap: 2em;
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-03-22

  • 慕勒0480411
    box-shadow:x偏移量 y偏移量 模糊距离 阴影尺寸 阴影颜色 投影方式 inset为内部阴影
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2015-05-05

  • 御风天流
    多列布局——column-count column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明： 属性值 属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。 例如：将列分成四列显示，代码如下： column-count:4;
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-count

    2018-03-22

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

    2018-03-22

  • 御风天流
    为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。 语法： columns：<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数。 参数 参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数 举例：要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2;
    查看全部
    0 采集 收起 来源：CSS3 多列布局——Columns

    2018-03-22

  • 御风天流
    perspective:透视方式，也就是近大远小的显示方式。 镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。 可以调整镜头与平面位置： a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。 b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。 在chrome中有一个问题，那就是perspective一定要在rotateY（或rotateX）的前面。否则perspective的设置会无效。
    查看全部
    0 采集 收起 来源：制作3D旋转导航综合练习题

    2015-05-05

  • 御风天流
    设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下： 属性值 效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果 在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
    查看全部
    0 采集 收起 来源：CSS3中设置动画时间外属性

    2015-05-05

  • 御风天流
    设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。 参数： 其主要有两个值：running和paused。 其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。 例如，页面加载时，动画不播放。代码如下：
    查看全部
    0 采集 收起 来源：CSS3中设置动画的播放状态

    2015-05-05

  • 御风天流
    设置动画播放方向 animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放方向

    2015-05-05

  • 御风天流
    animation-iteration-count属性主要用来定义动画的播放次数。 语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite，动画将会无限次的播放。
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放次数

    2018-03-22

首页上一页965966967968969970971下一页尾页

举报

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

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

查看已购买的课程