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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • wzhow
    这套教程还没开始讲到伪元素，好在这两天在慕课网学了很多东西，现在用起来简直毫无难度
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-05-24

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

    2015-05-24

  • wzhow
    控制颜色位置
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2015-05-24

  • 溱源
    transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2015-05-24

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

    2015-05-24

  • 溱源
    动画--过渡属性 transition-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-05-24

  • wzhow
    20px/10px x=20px,y=10px; 20px 10px 左上20px，右上10px，右下20px，左下10px
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-05-24

  • 溱源
    变形--原点 transform-origin 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-05-24

  • 溱源
    变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。 (⊙o⊙) abcdef a\d 水平、垂直伸缩量，1表示原始大小 b\c 纵向、横向 扭曲，0为不变 e、f 水平、垂直偏移量，0为初始位置
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-05-24

  • 溱源
    变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） demo code :使用translate实现宽高不固定元素，水平垂直居中
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2015-05-24

  • 溱源
    扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg);) transform:skew(-45deg);)
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2015-05-24

  • 溱源
    -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform:rotate(-20deg); 没有-o-transform ?? 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2015-05-24

  • UFO2015
    用逗号隔开每组 background 的缩写值； 如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。
    查看全部
    0 采集 收起 来源：CSS3背景 multiple backgrounds

    2018-03-22

  • 野山椒鸡杂
    none 不生成任何内容 attr 插入标签属性值 url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string 插入字符串
    查看全部
    0 采集 收起 来源：CSS生成内容

    2015-05-24

  • UFO2015
    ，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2015-05-24

首页上一页934935936937938939940下一页尾页

举报

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

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

查看已购买的课程