慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

程显艺

display:inline; 内联元素，简单来说就是在同一行显示。 display:block; 块级元素，简单来说就是就是有换行，会换到第二行。 display:inline-block; 就是在同一行内的块级元素。设置 div 元素的不透明级别： div

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2015-08-07
Amy_sh

设置动画播放次数 animation-iteration-count属性主要用来定义动画的播放次数。语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite，动画将会无限次的播放。

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2018-03-22
Amy_sh

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

查看全部

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

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
Amy_sh

调用动画 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-08-07
Amy_sh

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

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-08-07
Amy_sh

transition(-webkit-transition, -moz-transition, -o-transition)或者分开写四个样式 transition-property(-webkit-transition-property, -moz-transition-property, -o-transition-property): transition-duration(-webkit-transition-duration, -moz-transition-duration, -o-transition-duration): transition-timing-function(-webkit-transition-timing-function, -moz-transition-timing-function, -o-transition-timing-function): transition-delay(-webkit-transition-delay, -moz-transition-delay, -o-transition-delay):

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2015-08-07
Amy_sh

过渡属性transition: 就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-08-07
悠悠河边草

前缀浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera

查看全部

0 采集收起来源：什么是CSS3？
2015-08-07
_Mok

其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-08-07
_Mok

ease,快到慢 linear,恒速 ease-in,渐显 ease-out,渐隐 ease-in-out,渐显渐隐

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2015-08-07
_Mok

Chrome和Safari: @-webkit-keyframes、-webkit-animation Foxfire: @-moz-keyframes、-moz--animation

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-08-07
Olown

Responsive设计前提 <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

查看全部

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

响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。

查看全部

0 采集收起来源：Responsive设计（一）
2015-08-07
Olown

从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。

查看全部

0 采集收起来源：Responsive设计（一）
2015-08-07

首页上一页 829 830 831 832 833 834 835 下一页尾页

0/150

提交

取消

开始学习

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

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