慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Miss馬也

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

查看全部

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

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
Miss馬也

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2018-03-22
Miss馬也

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-02
Miss馬也

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。 Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。 animation前也需要添加前缀。

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-04-02
海飞丝的芳香

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-04-02
思迥异做不同

root 相当与匹配元素所在文档的根源素，在HTML文档中根源素始终是html

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2015-04-02
思迥异做不同

CSS3相对于CSS2新增的3个属性选择器： 1、E[att^="val"] E是标签名，att是属性，val是指属性值以val开头的任何字符串 2、E[att$="val"] E是标签名，att是属性，val是指属性值以val结尾的任何字符串 3、E[att*="val"] E是标签名，att是属性，val是指属性值任意位置包含了val的字符串

查看全部

0 采集收起来源：CSS3选择器属性选择器
2018-03-22
思迥异做不同

background-size 语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
思迥异做不同

裁剪图片背景background-clip background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框|内填充 |内容区域向外裁剪背景。no-clip表示不裁切

查看全部

0 采集收起来源：CSS3背景 background-clip
2015-04-02
思迥异做不同

background-origin 设置元素背景图片的原始起始位置。语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-04-02
思迥异做不同

text-shadow // 文本阴影

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2015-04-02
思迥异做不同

text-overflow:ellipsis; // 文本溢出部分省略号显示 overflow:hidden; // 溢出部分隐藏 white-space:nowrap; // 强制文本在一行类显示

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-04-02
CSS初学者

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-04-01
Mext

transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间先来看transition-property属性 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-04-01

首页上一页 1015 1016 1017 1018 1019 1020 1021 下一页尾页

0/150

提交

取消

开始学习

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

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