慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕粉1433309278

2n-1奇数，n全部，2n偶数

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2017-03-08
慕粉1433309278

选择器的知识点(:frist/last-child)//第一个或最后一个子节点

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2017-03-08
小鹏_ing

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2017-03-08
百兽凯多00

将div的默认样式改成黑色就很好看清楚了。如果没有animation-delay的话没有区别，加了delay：1s之后， 1、none在delay的1s内会呈现初始样式效果。 2、backwards在delay的1s内会呈现第一帧的样式效果。 3、forwards会在动画结束之后保持最后一帧的样式效果。 4、both会在delay的1s内呈现第一帧的样式效果，并且在动画结束之后保持最后一帧的样式效果。

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2017-03-07
慕粉1433309278

div:not([id="footer"]){ background: orange; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2018-03-22
百兽凯多00

border-radius: 100% 应该改为50% 因为正方形四个角都以边长的一半去倒角即是圆形。也就是说写成51% 以上都是都是圆形，跟50%的效果是相同的。动画是从圆变成方，即倒角由50%减到0。如果写成border-radius: 100%; 那么动画是由100%减到0, 而100%先减到50%，需要0.5秒（动画时间1秒+延迟0.2秒），这段过程圆没变化，50%减到0，圆变成方，需要0.5秒。这样延迟就显得很长，动画变得很快，让人感觉很不舒服。改为 border-radius: 50%; 那么动画是由50%减到0, 动画时间1秒，0.2秒的延迟，这样就好多啦！

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2017-03-07
慕粉4448690

用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
百兽凯多00

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2017-03-07
慕粉1036225820

不同的浏览器可能需要不同的前缀 -webkit chrome和safari -moz firefox -ms ie -o opera

查看全部

0 采集收起来源：什么是CSS3？
2017-03-07
慕粉1346254686

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景原点</title> <style type="text/css"> .wrap { width:220px; border:20px dashed #000; padding:20px; font-weight:bold; color:#000; background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; background-origin: content-box; position: relative; } .wrap span { position: absolute; left:0; top:0; } .content { height:80px; border:1px solid #333; } </style> </head> <body> <div class="wrap"><span>padding</span> <div class="content">content</div> </div> </body> </html>

查看全部

0 采集收起来源：CSS3背景 background-origin
2018-03-22
慕粉0041071540

CSS3边框阴影 box-shadow（一） box-shadow是向盒子添加阴影。支持添加一个或者多个。很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];参数介绍：注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。为元素设置外阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333; }效果：为元素设置内阴影：示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333 inset; }效果：添加多个阴影：以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }效果：任务在右侧编辑器中的第10行，为div添加两个不同的阴影，一个外部阴影，一个内部阴影。备注:这一小节没有正确性验证，请查看结果窗口，从而判断输入代码是否正确。 index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>boxshadow</title> <style> .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px #666; } .boxshadow-inset{ width:100px; height:100px; box-shadow:4px 4px 6px #666 inset; } .boxshadow-multi{ width:100px; height:100px; box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; } </style> </h

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2018-03-22
慕粉0041071540

CSS3边框圆角效果 border-radius border-radius是向元素添加圆角边框。使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆：方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2017-03-06
利木

【思考这条评论】： border-radius: 100% 应该改为50% 因为正方形四个角都以边长的一半去倒角即是圆形。也就是说写成51% 以上都是都是圆形，跟50%的效果是相同的。动画是从圆变成方，即倒角由50%减到0。如果写成border-radius: 100%; 那么动画是由100%减到0, 而100%先减到50%，需要0.5秒（动画时间1秒+延迟0.2秒），这段过程圆没变化，50%减到0，圆变成方，需要0.5秒。这样延迟就显得很长，动画变得很快，让人感觉很不舒服。改为 border-radius: 50%; 那么动画是由50%减到0, 动画时间1秒，0.2秒的延迟，这样就好多啦！

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2017-03-06
零玫瑰

transition的优点在于简单易用，但是它有几个很大的局限。（1）transition需要事件触发，所以没法在网页加载时自动发生。（2）transition是一次性的，不能重复发生，除非一再触发。（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2017-03-06
qq_狼来了_0

脚本下载地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22

首页上一页 296 297 298 299 300 301 302 下一页尾页

0/150

提交

取消

开始学习

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

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