慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

不幻

transform-origin只有在定义了transform 转换属性时才有用

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2015-03-17
深呼吸_0

类容好多啊，不懂，以后再看。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2015-03-17
深呼吸_0

原来半透明是怎么写的啊： background:rgba(255,255,255,0.5);

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-03-17
qq_凌_0

div:empty{..}用来选择没有任何内容的元素

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2015-03-17
二婷子

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：属性值效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-03-17
qq_凌_0

:not 选择除某个元素之外的所有元素 div:not[id="footer"]{ background:#f00;}

查看全部

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

:root{background:orange} = html {background:orange;}

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2015-03-17
二婷子

@-webkit-keyframes move { 0%{ transform: translateY(90px); } 15%{ transform: translate(90px,90px); } 30%{ transform: translate(180px,90px); } 45%{ transform: translate(90px,90px); } 60%{ transform: translate(90px,0); } 75%{ transform: translate(90px,90px); } 90%{ transform: translate(90px,180px); } 100%{ transform: translate(90px,90px); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } span { display: inline-block; width: 20px; height: 20px; background: orange; transform: translateY(90px); -webkit-animation-name: move; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease-in; -webkit-animation-delay: .2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:paused; } div:hover span { -webkit-animation-play-state:running; }

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-03-17
二婷子

animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-03-17
二婷子

@-webkit-keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; -webkit-animation-name:move; -webkit-animation-duration: 10s; -webkit-animation-timing-function:ease; -webkit-animation-delay:.1s; -webkit-animation-iteration-count:infinite; }

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2015-03-17
二婷子

@-webkit-keyframes changeColor { from { border-radius: 0; background:red; } to { border-radius:100%; background:green; } } div { width: 200px; height: 200px; background: red; text-align:center; margin: 20px auto; line-height: 200px; color: #fff; } div:hover { -webkit-animation-name: changeColor; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease-out; -webkit-animation-delay: .1s; }

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2015-03-17
二婷子

@-webkit-keyframes 'changecolor'{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: red; } } div { width: 300px; height: 200px; background: red; color:#fff; margin: 20px auto; } div:hover { -webkit-animation: changecolor 5s ease-out .2s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-03-17
hi喵仔

跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all 取值说明属性值属性值说明 none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

查看全部

1 采集收起来源：CSS3 跨列设置column-span
2015-03-16
谁夏了夏天

-webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); transform:skew(-45deg);

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2015-03-16
势仔仔

div {padding: 20px;margin: 30px;outline: red solid 2px;border: 2px solid green;} 同时用outline和border很讨巧地制作双色边框。

查看全部

0 采集收起来源：CSS3外轮廓属性
2015-03-16

首页上一页 1064 1065 1066 1067 1068 1069 1070 下一页尾页

0/150

提交

取消

开始学习

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

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