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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 逝水流香
    border-radius:左上 右上 右下 左下。
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2017-03-26

  • 逝水流香
    box-shadow:x偏移量 y偏移量 阴影宽度 阴影颜色 阴影方式（默认为外置）；（多个阴影，用逗号隔开）
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（二）

    2017-03-26

  • 慕粉4018805
    伪类选择器"：root"等于<html>元素 即 ：root{background:orange} html{background:orange;}
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—root

    2018-03-22

  • 慕粉4018805
    新增3选择器： ^表示以此开头 $表示以此结尾 *表示包含
    查看全部
    0 采集 收起 来源：CSS3选择器 属性选择器

    2017-03-26

  • 慕粉4018805
    设置图片起始位置： background-origin:border-box|padding-box|content-box; 分别为边框，内边距，内容区域 前提：背景是no-repeat属性，否则只从边框开始显示
    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2017-03-26

  • 慕粉4018805
    文本阴影语法： text-shadow:阴影水平偏移距离 阴影垂直偏移距离 阴影模糊程度 阴影颜色； 1 水平值为正，向右偏移 2 垂直值为正，向下偏移 3 模糊值必为正，越大越模糊
    查看全部
    0 采集 收起 来源：CSS3文字与字体 文本阴影text-shadow

    2017-03-26

  • 慕粉4018805
    嵌入电脑没有安装的字体 语法：@font-face{font-family:字体名称； src:字体文件在服务器端的相对或绝对路径；}
    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2017-03-26

  • JohnieXu
    但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2017-03-26

  • JohnieXu
    inset 可以写在参数的第一个或最后一个，其它位置是无效的，表示内部阴影
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2017-03-26

  • 乔布斯写代码
    通过border-radius属性，将圆形变成方形的动画-----真的是超级棒
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡函数 transition-timing-function

    2017-03-25

  • 布偶阿喵
    animation-name: myMove; 规定@keyframes动画的名称 animation-duration: 3s; 规定动画完成一个周期所花费的秒或毫秒 animation-timing-function: step-end; 规定动画的速度曲线 step-start 马上跳转到动画结束状态 step-end 保持动画开始状态，直到动画执行时间结束，马上跳转到动画结束状态 animation-delay: 3s; 规定动画何时开始。默认是0 animation-iteration-count: 3; 规定动画被播放的次数。默认是1 infinite 指定动画应该播放无限次 animation-direction: alternate; 定义是否循环交替反向播放动画。默认“normal” reverse 动画反向播放 alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放 alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放 animation-play-state: running; 动画的播放状态 paused 指定暂停动画 running 指定正在运行的动画 animation-fill-mode：属性定义在动画开始之前和结束之后发生的操作。 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果 简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。 @keyframes是关键帧 创用百分比来规定变化发生的时间 @keyframes myMove{ 0%{ background: red; } 100%{ background: green; } } 在@keyframes中，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2017-03-25

  • 布偶阿喵
    box-sizing: content-box | border-box | inherit content-box: W3C标准模型 border-box: IE传统盒模型 inherit：使元素继承父元素的盒模型模式 在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型 1.W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”） 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2017-04-09

  • 布偶阿喵
    transform: rotate(45deg); 如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 rotate 旋转元素对象，取值为一个度数值 transform: scale(0.8,0.8) 1.scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 2.scaleX(x)元素仅水平方向缩放（X轴缩放） 3.scaleY(y)元素仅垂直方向缩放（Y轴缩放） scale 改变元素的宽度和高度，取值包括正数、负数以及小数 缩放效果 transform: translate(10px,10px); 1.translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2.translateX(x)仅水平方向移动（X轴移动） 3.translateY(Y)仅垂直方向移动（Y轴移动） translate 沿着X和Y轴移动元素 平移/转换效果 transform: skew(45deg,30deg); 1.skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 2.skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3.skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形） skew 倾斜元素对象，取值为一个度数值 matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()); transform-origin: left top; 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2017-03-25

  • 布偶阿喵
    CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 none 没有属性会获得过渡效果 all 所有属性将获得过渡效果 property 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 linear 规定以相同速度开始至结束的过渡效果 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果 ease-in 规定以慢速开始的过渡效果 ease-out 规定以慢速结束的过渡效果 ease-in-out 规定以慢速开始和结束的过渡效果 cubic-bezier(x1,y1,x2,y2)在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值 transition-delay:指定开始出现的延迟时间
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2017-03-25

  • 布偶阿喵
    制作导航菜单的小技巧
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2017-03-25

首页上一页277278279280281282283下一页尾页

举报

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

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

查看已购买的课程