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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 天羽蔚灵
    ::selection选择器 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示： 从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为：蓝色背景、白色文本。 有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
    查看全部
    0 采集 收起 来源：CSS3选择器 ::selection选择器

    2015-10-06

  • 天羽蔚灵
    :checked选择器 在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
    查看全部
    0 采集 收起 来源：CSS3选择器 :checked选择器

    2015-10-06

  • 天羽蔚灵
    disabled选择器 “:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。
    查看全部
    0 采集 收起 来源：CSS3选择器 :disabled选择器

    2015-10-06

  • 天羽蔚灵
    :enabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
    查看全部
    0 采集 收起 来源：CSS3选择器 :enabled选择器

    2015-10-06

  • pkjy
    设置动画播放次数 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

  • pkjy
    调用动画 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-10-06

  • pkjy
    Keyframes介绍 Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2015-10-06

  • pkjy
    动画--过渡延迟时间 transition-delay transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。 例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2015-10-06

  • pkjy
    动画--过渡函数 transition-timing-function transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： ease:由快到慢，逐渐变慢 linear：恒速 ease-in:加速 ease-out:减速 ease-in-out:先加速再减速
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡函数 transition-timing-function

    2015-10-06

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

    2015-10-06

  • adamyolo
    CSS生成内容 在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 content配合CSS的伪类或者伪元素，一般可以做以下四件事情： 功能 功能说明 none 不生成任何内容 attr 插入标签属性值 url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string 插入字符串
    查看全部
    0 采集 收起 来源：CSS生成内容

    2015-10-06

  • pkjy
    练习题，MARK一下，还要经常温习。
    查看全部
    0 采集 收起 来源：切换背景图像综合练习题

    2015-10-06

  • adamyolo
    Responsive设计——不同设备的分辨率设置 1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ } 现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下： @media (max-width: 480px) { ... } @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 980px) { ... } @media (min-width: 1200px) { .. }
    查看全部
    0 采集 收起 来源：Responsive设计——不同设备的分辨率设置

    2015-10-06

  • pkjy
    ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
    查看全部
    0 采集 收起 来源：CSS3选择器 ::before和::after

    2018-03-22

  • pkjy
    ::selection 用来匹配突出显示的文本(用鼠标选择文本时的文本) edge显示正常，火狐不行。
    查看全部
    0 采集 收起 来源：CSS3选择器 ::selection选择器

    2015-10-06

首页上一页745746747748749750751下一页尾页

举报

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

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

查看已购买的课程