十天精通CSS3_技术问答

首页免费课十天精通CSS3 问答

十天精通CSS3

                
                大漠
            Web前端工程师

                    查看讲师更多课程 
                    大漠讲师的其他课程
                
Sass进阶篇
中级·46636
免费课程
                                
Sass入门篇
中级·104421
免费课程
                                
玩转Bootstrap（JS插件篇）
中级·128657
免费课程
                                
玩转Bootstrap（基础）
初级·314547
免费课程
                                
                难度初级
            
                时长 5小时 0分
            
                学习人数
            
综合评分9.40
                            485人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.3
                                简洁易懂
                            
                                9.2
                                逻辑清晰

全部评论问答未解决精华

animation-timing-function里的一些属性我看不懂啊

已采纳回答 / Einson

定义和用法animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。默认值：ease 继承性：no JavaScript 语法：object.style.animationTimingFunction="linear" 语法animation-timing-function: value;animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数...

1 回答 1537 浏览 9-4 CSS3中设置动画播放方式

2016-07-28

Nehpets

再来一个演示 3D transform 的神器，手动调节各项参数比如 perspective、tranform，实时查看变换效果，简单粗暴，玩一遍你绝对懂了！
http://fangyexu.com/tool-CSS3Inspector.html

10 9-10 制作3D旋转导航综合练习题

2016-07-28

Nehpets

关于 3D transform 变换的详细解释和原理请看这两篇文章，一图胜千言
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
http://www.w3cplus.com/css3/css-3d.html

5 9-10 制作3D旋转导航综合练习题

2016-07-28

Nehpets

把动画代码同时写进 div 和 div span，小球和方框同步运动，更有意思了

animation-name:around;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count:infinite;

2 9-2 CSS3中调用动画

2016-07-28

一仁

这个练习并没有让大家写css,只是需要把对应的选择器写上就可以了，主要是为了加深对各个选择器的用法和理解

2 7-8 切换背景图像综合练习题

2016-07-27

不二周助爱萌猫3365373

太流弊了，真心流弊。感人，放在第一页是为了让兴趣爆棚还是决心从入门到放弃【笑哭】

1 1-2 CSS3能做什么？

2016-07-27

一个程序猿

我改到1s,就感觉不正常了，竟然还有人改到0.1s...

0 1-2 CSS3能做什么？

2016-07-27

Nehpets

Bootstrap 已经开始把默认盒模型都设置成了 border-box，对自适应设计来说，可能是最好的盒子模型了，然而微软在IE6的年代已经在使用了。
只能说有时候理念太过超前，反而可能因为超然于行业平均水平之上，时机不成熟，行业无法接受，反而被大家抛弃。远有十多年前的 Tablet PC 平板电脑的销声匿迹，近有今天的浏览器标准之争，历史的悖论，微软的悲剧吧。

5 10-7 CSS3 盒子模型

2016-07-27

Nehpets

至于为什么，W3C的标准盒模型中，内容、内边距和边框变化会把元素撑大，而传统IE盒模型中则没有这个问题：

box-sizing:content-box，按W3C的盒子模型计算，内容+内边距+边框=元素大小
这是搭积木，三块积木搭出一个房子，任何一块积木大小变化了，房子结构就不稳定了，表现为把元素撑大
box-sizing:border-box，按传统IE盒子模型计算，元素大小=内容+内边距+边框
这是盖房子，事先定好尺寸，盖好一个房子，里边放三块积木，随便你们三个怎么变化，只要不超过房子的大小，随你们折腾

原先W3C认为IE的 border-box 模型是逗比，事实证明W3C才是逗比

64 10-7 CSS3 盒子模型

2016-07-27

Nehpets

写不下了，接第2句，除非div里的内容、内边距、边框宽高的总值超过100*100px，才会把div撑大。

box-sizing 的参数概括：
box-sizing:content-box，还按原来W3C的盒子模型计算
box-sizing:border-box，按传统IE的盒子模型计算
box-sizing:inherit，继承父元素的盒子模型

感觉还是 box-sizing:border-box，这个方便一些，简单粗暴，总是黑IE，但是IE这点没得黑

5 10-7 CSS3 盒子模型

2016-07-27

Nehpets

为什么讲这么复杂！
两句话解释什么是box-sizing
1. CSS2中，元素(例如div)的内边距(padding)和边框(border)会把元素自身撑大。想要个100*100px的div，都要事先计算，例如，内容80px + 内边距15px + 边框5px = 100px
2. CSS3中，新增 box-sizing 属性，如果设置元素为 box-sizing: border-box，那么元素的内边距(padding)和边框(border)不会再把元素自身撑大。例如，设置div为100*100px，那么无论div里内容、内边距、边框的宽高怎么变化，div的大小永远都是100*100px

60 10-7 CSS3 盒子模型

2016-07-27

LXYLING

主要还是在翻转，谁会给我讲讲呗

0 12-4 制作3D旋转视频展示区

2016-07-26

LXYLING

ie盒子模型和w3c盒子模型下heigh和width代表含义不一样
w3c下的height和weight仅仅表示内容宽度和高度

0 10-7 CSS3 盒子模型

2016-07-26

AttackOnSE

我就看了一下源代码，我真的被吓尿了

0 9-10 制作3D旋转导航综合练习题

2016-07-26

qq_葡萄说柠檬你好酸_0

一天征服这个教程

1 8-10 CSS3中的动画--过渡延迟时间 transition-delay

2016-07-26

慕前端9918592

啊，记错了，是text-shadow

0 2-3 CSS3边框阴影 box-shadow（二）

2016-07-26

首页上一页 205 206 207 208 209 210 211 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

十天精通CSS3

animation-timing-function里的一些属性我看不懂啊