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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
    查看全部
  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
  • 这一小节我们来说一下线性渐变: 参数: 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示: (单击图片可放大) 第一个参数省略时,默认为“180deg”,等同于“to bottom”。 第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); 效果图:
    查看全部
  • nth-of-type元素 当混合使用的时候,如果还有其他元素的话, 使用e:nth-of-type(2n+1)等表达式时, 计算的是匹配符合e元素的奇数,而不是e和其他元素的之和的奇数
    查看全部
  • 2n+1 为奇数, 反之为偶数;
    查看全部
  • 元素扭曲skew display:block;块状元素 transform:skew(45deg);
    查看全部
  • 实现旋转 transform:rotate(10deg); 必要时加-webkit- -moz- -o-
    查看全部
  • 伪类选择器 ul>li:first-child ul下的li里的第一个子元素
    查看全部
  • target用法: # div对应的id : target 标签名 { code; }// code将会改变标签名对应的标签的样式
    查看全部
  • input:not(type="[submit"]){css样式}除了submit外所有input的样式
    查看全部
  • first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
    查看全部
  • “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。
    查看全部
  • “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。
    查看全部
  • 对代码做一些调整后,有利于观察: 将初始background设置为orange,姑且把这一帧叫做初始帧 动画里面的red为第一帧,blue为最后一帧。 将duration调短为5s,将delay调长为3s。 下面就可以开始试了: 1. none:从初始帧orange开始,延迟3s后开始播放动画 red-->blue,动画完成后,跳回到初始帧orange。 2. forwards:从初始帧orange开始,延迟3s后开始播放动画 red-->blue,动画完成后,留在最后一帧blue. 3. backwards : 也是从初始帧orange开始,但是由于会迅速应用动画的第一帧,所以延迟没有用了,立马就闪到了第一帧red。动画完成后,跳回到初始帧orange。 4. both:同时具有forwards和backwards效果,即拥有forwards动画结束留在最后一帧blue的效果,也拥有迅速应用动画的第一帧red的效果。这样both综合的效果为:从初始帧orange开始,迅速跳到第一帧red,然后变化到最后一帧blue结束,并留在最后一帧blue。
    查看全部
  • animation-play-state属性 主要用来控制元素动画的播放状态。 参数: 其主要有两个值:running和paused。
    查看全部

举报

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

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