慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

humble_果_0

outline和border不同： 1.外outline不占用网页布局空间，不一定是矩形 2.增加一个位置熟悉，可移动

查看全部

0 采集收起来源：CSS3外轮廓属性
2015-09-21
humble_果_0

多列布局 columns：width count column-width column-count colunm-gap column-rule column-span 跨列

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2015-09-21
TB爱JN

火狐无法显示，谷歌显示正常

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2015-09-21
张龙冬

实现文字省略效果-text-overflow.hidden text-wrap.no-wrap text-

查看全部

0 采集收起来源：自由缩放属性resize
2015-09-21
Joeylucky

@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ } http://www.fontsquirrel.com/tools/webfont-generator 上传自己的字体，生成所有浏览器支持的字体格式，神器！

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2015-09-20
菜鸟傑

min-width:是主要断点 max-width：是次要断点

查看全部

0 采集收起来源：Responsive设计（二）
2015-09-20
和和美美

@keyframmes

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-09-20
慕莱坞9220042

-ms-transform:rotate(7deg); //-ms代表ie内核识别码 -moz-transform:rotate(7deg); //-moz代表火狐内核识别码 -webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码 -o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码

查看全部

0 采集收起来源：CSS3 列间距column-gap
2015-09-20
Agony2015

设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。案例演示：制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。 HTML: <div>Hover Me</div> CSS: @keyframes toradius{ from { border-radius: 0; } to { border-radius: 100%; } } div { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #fff; background: green; margin: 20px auto; } div:hover { animation-name: toradius; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: .1s; } 在调用move动画播放中，让元素样式从初始状态到终止状态时，先加速再减速，也就是渐显渐隐效果。

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2018-03-22
Agony2015

设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。案例演示：制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。 HTML: <div>Hover Me</div> CSS: @keyframes toradius{ from { border-radius: 0; } to { border-radius: 100%; } } div { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #fff; background: green; margin: 20px auto; } div:hover { animation-name: toradius; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: .1s; }

查看全部

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

调用动画 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-09-20
Agony2015

CSS: @keyframes wobble { 0% { margin-left: 100px; background:green; } 40% { margin-left:150px; background:orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } div { width: 100px; height: 100px; background:red; color: #fff; } div:hover{ animation: wobble 5s ease .1s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-09-20
Agony2015

Keyframes介绍 Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。浏览器的支持情况： Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。案例演示通过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。 HTML: <div>鼠标放到我身上</div>

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2018-03-22
Agony2015

动画--过渡延迟时间 transition-delay transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;} 示例演示：通过transition属性将一个200px *200px的橙色容器，在鼠标悬浮状态时，过渡到一个300px * 300px的红色容器。而且整个过渡0.1s后触发，并且整个过渡持续0.28s。 HTML代码: <div class="wrapper"> <div>鼠标放到我的身上来</div> </div> CSS代码: .wrapper { width: 400px; height: 400px; margin: 20px auto; border: 2px dotted red; } .wrapper div { width: 200px; height: 200px; background-color: orange; -webkit-transition: all .28s ease-in .1s; transition: all .28s ease-in .1s; } .wrapper div:hover { width: 300px; height: 300px; background-color: red; }

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2018-03-22
Agony2015

动画--过渡所需时间 transition-duration transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。案例演示：在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续0.5s。 HTML: <div></div> CSS: div { width: 300px; height: 200px; background-color: orange; margin: 20px auto; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: .2s; transition-delay: .2s; } div:hover { border-radius: 20px; }

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2018-03-22

首页上一页 765 766 767 768 769 770 771 下一页尾页

0/150

提交

取消

开始学习

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

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