慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

传说级小白

/*使用伪元素制作导航列表项分隔线*/ li:after { content:'|'; position: absolute; right: 0; } /*删除第一项和最后一项导航分隔线*/ li:last-child:after { display:none; }

查看全部

2 采集收起来源：CSS3背景制作导航菜单综合练习题
2015-08-18
良艺

！关键知识点： 1.background-image:radial-gradient(//径向渐变 farthest-side ellipse at center, rgba(246, 241, 232, .85) 39%, rgba(212, 204, 186, .5) 100% ), url(http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg ); 2.background-size:cover;//背景全屏显示 3.text-decoration: underline;// 4.perspective: 4000px;// 5.transform-style: preserve-3d;// 6.transition:transform .6s;// 7.transform: translateZ(-50px) rotateX(95deg);// 8.box-shadow: 0 9px 9px rgba(0, 0, 0, .6);//

查看全部

0 采集收起来源：制作3D旋转视频展示区
2015-08-18
水月锦华

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

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-08-18
水月锦华

animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为： animation-direction:alternate; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-08-18
水月锦华

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
良艺

outline:2px solid red;//外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。

查看全部

0 采集收起来源：CSS3外轮廓属性
2015-08-18
良艺

resize:none |both |horizontal |vertical; none:水平垂直都不让更改 both:水平垂直都让更改 horizontal:水平宽度可以更改,垂直高度不能更改 vertical:垂直高度可以更改,水平宽度不能更改

查看全部

0 采集收起来源：自由缩放属性resize
2015-08-18
良艺

display:flex;//设置为flex伸缩布局 align-items: center;//纵向居中 justify-content:center;//横向居中

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-08-18
良艺

box-sizing:border-box | content-box; //前者设置width和height时,边框和padding也被包括在其中;后者设置width和height时,边框和padding是不被包括其中的,仅仅是内容content的宽度和高度

查看全部

0 采集收起来源：CSS3 盒子模型
2015-08-18
良艺

column-span:all;//设置一列可以跨多列显示

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-08-18
良艺

column-rule:3px solid grey;//设置列与列之间的边框分隔线，类似于border

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2015-08-18
良艺

column-gap:2em;//列与列之间的间距，当然用px为单位也是可以的

查看全部

0 采集收起来源：CSS3 列间距column-gap
2015-08-18
良艺

columns:150px 3; 其中两个属性分别是以下两个属性的简写： columns-width:150px; columns-count:3;

查看全部

0 采集收起来源：CSS3 多列布局——column-width
2015-08-18
良艺

columns:150px 3;//将段落分成3列,每列宽度为150px

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2015-08-18
蘑小菇

渐变和伪元素做导航栏菜单

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2015-08-18

首页上一页 807 808 809 810 811 812 813 下一页尾页

0/150

提交

取消

开始学习

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

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