慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

陈冠玲

css3 浏览器前缀： 1.-webkit ---chrome和safari 2.-moz ----firefox 3.-ms ----IE 4.-o ----opera

查看全部

0 采集收起来源：什么是CSS3？
2016-09-27
爱学习要努力

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。示例展示点击链接显示隐藏的段落。分析： 1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。多个url（多个target）处理：就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2018-03-22
爱学习要努力

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。示例显示：比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p> CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2018-03-22
爱学习要努力

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2018-03-22
荒野上摔倒

选择器，从字面上我们就可以很清楚的理解是根选择器，意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。通过“:root”选择器设置背景颜色 <div>:root选择器的演示</div> CSS代码： :root {background:orange;} “:root”选择器等同于<html>元素，简单点说：:root{background:orange} html {background:orange;}得到的效果等同。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2018-03-22
荒野上摔倒

CSS2中引入了一些属性选择器，CSS3属性选择器进行扩展(增3个) 属性选择器有了通配符的概念

查看全部

0 采集收起来源：CSS3选择器属性选择器
2016-09-27
荒野上摔倒

background ：[background-color] [background-image] [background-position][/background-size] [background-repeat] [background-attachment] [background-clip] [background-origin],... 可以把上面的缩写拆解成以下形式： background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意：用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
泰山升龙霸

总结下，CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property duration timing-function delay; animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2016-09-26
泰山升龙霸

Keyframes 关键帧类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2016-09-26
泰山升龙霸

过度延时时间函数：transition-delay 用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2016-09-26
泰山升龙霸

过度函数：transition-timing-function 是指过度的“缓动函数”，主要用来指定浏览器的过度速度，以及过度期间的操作进展情况 ease：默认值，速度由快到慢，逐渐变慢 linear：速度恒速 ease-in：速度越来越快，常称为渐显效果 ease-out：速度越来越慢，常称为渐隐效果 ease-in-out：先加速再减速，常称为渐显渐隐效果

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2016-09-26
泰山升龙霸

过度函数：transition-property transition-property:指定过度或动态模拟的CSS属性 transition-duration：指定完成过度所需时间 transition-timing-function：指定过度函数 transition-delay：指定开始出现的延时时间

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-09-26
泰山升龙霸

transform-origin() 用来对元素进行原点设置改变。

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-09-26
泰山升龙霸

矩阵函数：matrix() 是一个含六个值的变换矩阵，用来指定一个2D变换，相当于直接应用一个【a,b,c,d,e,f】矩阵 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-09-26
泰山升龙霸

位移函数：translate(x,y)函数将元素向指定的方向移动。类似于position中的relative translateX（）向水平方向移动 translateY（）向垂直方向移动

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-09-26

首页上一页 398 399 400 401 402 403 404 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果