慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

yunyun_0124

在Responsive布局中，可以毫无保留的丢弃：第一，尽量少用无关紧要的div；第二，不要使用内联元素（inline）；第三，尽量少用JS或flash；第四，丢弃没用的绝对定位和浮动样式；第五，摒弃任何冗余结构和不使用100%设置。有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？第一，使用HTML5 Doctype和相关指南；第二，重置好你的样式（reset.css）；第三，一个简单的有语义的核心布局；第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

查看全部

0 采集收起来源：Responsive布局技巧
2015-04-16
yunyun_0124

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
yunyun_0124

@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} }

查看全部

0 采集收起来源：Media Queries使用方法
2015-04-16
Undefeatedrhythum

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
Undefeatedrhythum

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]*

查看全部

0 采集收起来源：CSS3中设置动画开始播放的时间
2018-03-22
Undefeatedrhythum

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。语法规则： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2018-03-22
Undefeatedrhythum

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2015-04-16
Undefeatedrhythum

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中设置动画播放时间
2015-04-16
Sharoncoco

6-5:结构性伪类选择器—target :target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。点击链接显示隐藏的段落。 HTML代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> CSS代码： .menuSection{ display: none; } :target{/*这里的:target就是指id="brand"的div对象*/ display:block;} 分析： 1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。多个url（多个target）处理：就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。如下面例子： html代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand">content for Brand</div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake</div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron">content for aron</div> css代码： #brand:target {background: orange;color: #fff;} #jake:target {background: blue;color: #fff;} #aron:target {background: red;color: #fff;} 上面的代码可以对不同的target对象分别设置不的样式。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2018-03-22
Undefeatedrhythum

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-04-16
Sharoncoco

6-4: 结构性伪类选择器—empty :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
Sharoncoco

6-3: 结构性伪类选择器—not :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; } 相关HTML代码： <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <label for="name">Password Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <input type="submit" value="Submit" /> </div> </form>

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2018-03-22
Undefeatedrhythum

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2015-04-16
yunyun_0124

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：属性值效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-04-16
yunyun_0124

animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-04-16

首页上一页 994 995 996 997 998 999 1000 下一页尾页

0/150

提交

取消

开始学习

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

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