CSS3动画效果加上简单@media响应式布局 week6学习

这个星期，一如既往的忙，可能厉害一点的时这个星期加了有算法和概统考试，一个星期都没有没有好好睡觉，四级模拟考考的很差。周一就看了一下W3C上关于CSS3动画的内容，这个星期培养人给我的任务是华为主页加上CSS3动画和响应式，前三天就把页面主要内容和布局做好了，只是没有加上响应式，接下来就去复习了，考完试才把响应式加上，刚开始看慕课网上讲的要用到框架，看的很懵逼，最后问了一下旁边的小伙伴，然后自己学习了解了一点Media响应式布局的内容,也遇到了一些问题。

W3C上了解到的CSS3:

           CSS3被划分为模块，其中最重要的CSS3模块包括：选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面。
1、CSS3边框圆角：border-radius
2、CSS3    边框阴影：box-shadow（eg:box-shadow:10px 10px 10px #888）
3、CSS3边框图片：border-image

   eg:使用图片创建围绕div元素的边框 div{border-image:url(border.png）30 30 round}

4、CSS3背景

CSS3 border-size:规定背景图片的尺寸（px或%）

CSS3 backgound-origin:规定背景图片定位区域。--背景图片可以放置于content-box,padding-box或border-box区域；

CSS3多重背景图片：eg:为body元素设置两幅背景图片 body{background-image:url(bg.gif,url(bgf.gif);}

5、CSS3文本效果：

CSS3文本阴影 ：text-shadow(能够规定水平阴影、垂直阴影、模糊距离以及阴影颜色）

         eg:像标题添加阴影：h1(text-shadow:5px 5px 5px #FF0000;}

CSS3自动换行：word-wrap（允许文本强制文本进行换行，但以为这单词可能会被拆分）

eg:p{word-wrap:break-word;}

6、CSS3 2D转换：能够对字体进行移动，缩放，移动，拉长或拉伸。（和慕课网上的规则一样，只不过还讲了一个matrix()）

matrix()方法把所有2D转换方法组合到一起，需6个参数，包括数字函数，允许你 旋转，缩放，移动以及倾斜元素。

eg:使用matrix（）方法将div元素旋转30度

div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}

7、CSS3 3D转换

rotateX(),rotateY();

通过rotateX()方法,元素围绕其X轴给定的度数进行旋转。

eg:div{transform:rotateX(120deg);}

通过rotateY()方法,元素围绕其Y轴给定的度数进行旋转。

eg:div(transform:rotateY(120deg);}

8、CSS3过渡（可以在不适用js和flash的情况下，为一个元素ongoing一种样式变到另一种样式时为元素添加效果）

要实现这一点，必须规定两项内容：一是规定你希望把效果添加到哪个CSS属性上；二是规定效果时长。

eg:规定width属性的过渡效果，时长为2s。div{transition:width 2s;}(注:如果时长未规定，则不会有过渡效果，默认值为0)

eg:多项改变，向宽度，高度和转换添加过渡效果。 div{transition:width 2s,height 2s,transform 2s;}

慕课网上CSS3动画部分视频中的一点响应式设计布局之@Media
1、常见写法：@media screen and(max-width:..px){(CSS代码)}//当屏幕宽度小于..px时，样式表会产生效果。
                           eg:@media screen and (max-width: 600px) { .class {background: #ccc; } }//当屏幕宽度600px            时，class选择器下的背景变为#ccc这种颜色。
      @media screen and(min-width:..px){(CSS代码)}---当屏幕大于..px时，样式表就会产生效果。
      还可以：@media screen and(max-width:..px)and(min-width:..px){(CSS代码)}---当屏幕大小处于一个范围内时，    样式表产生效果。
2、代all和only的写法（一般all跟only都是对应在一起出现的）
@media all and (min-width:xxx) and (max-width:xxx){
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/
}
@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/
}
3、device-aspect-ratio：可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：
用法：
@media only screen and (device-aspect-ratio:4/3)

在慕课网上还有关于响应式的教学视频，但是是讲到了bootstrap，运用感觉有点困难。

一些布局网页时的老问题和加入CSS3动画时遇到的新问题：

1、标题字体如何调整粗细：font-weight:100~900;
2、如果页面出现左右滑块，可以在css中body标签下加入overflow:-Scroll;overflow-x:hidden代码。
        上下可以用overflow:-Scroll;overflow-y:hidden，以此来使得滚动条消失
3、想要设置页面内容缩放时居中缩放，方法是在外面设置一个大的固定宽度的块，然后在他里面的各个小块中用       margin:0 auto;代码便可实现

4、当为图片设置动画时，鼠标放上去，图片往左移动10px，这时会发现图片左边会有一部分往左移显示图片透明，这时可以有两种方法可以解决：

     一是为装图片的块设置大小小于图片的大小（根据你要让你的图片移动多少来确定这个差）；然后设置溢出隐藏即可解决这个问题。

二是直接让图片溢出隐藏（这时显示效果肯定不比第一种美观，但是可以考虑）；