11.19
1.过渡
transition:transform 1s linear/ease-in
例：
div
{
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
div:hover
{
width:300px;
}
2.翻转rotate
语法：content.rotate(angle);
eg.
div{
width:300px;
height:300px;
background:red;
transition:all 1s linear;
}
div:hover{
width:300px;
width:300px;
height:300px;
background:red;
transform:rotate(180deg);
3. Keyframes
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于0% 和100%。
0% 是动画的开始时间，100%动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
语法：@keyframes animationname {keyframes-selector {css-styles;}}
例1：
使 div 元素匀速向下移动：
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
|
keyframes-selector |
必需。动画时长的百分比。 合法的值： · 0-100% · from（与 0%相同） · to（与 100%相同） |
例2：在一个动画中改变多个 CSS 样式：
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
4. css3多媒体查询
@media规则在css2中就有介绍，针对不同媒体颗星可以定制不同的样式规则。例如：你可针对不同的媒体类型(包括显示器、便携设备、电视机等等)设置不同的样式规则。但这些多媒体类型在很多设备上支持还不够友好
CSS3多媒体查询根据设置自适应显示。媒体查询可用于检测很多事情，例如：
viweport(视窗)的宽度与高度
设备的高度与宽度
朝向(智能手机横屏与竖屏)
分辨率
|
值 |
描述 |
|
all |
用于所有多媒体类型设备 |
|
|
用于打印机 |
|
screen |
用于电脑屏幕，平板，智能手机等。 |
|
speech |
用于屏幕阅读器 |
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
当浏览器尺寸小于/等于960px时候
@media (max-width: 960px){
body{
background: #000;
}
}
当浏览器尺寸大于/等于960px时候的代码了：
@media screen and (min-width:960px){
body{
background:orange;
}
}
页面宽度大于960px小于1200px的时候执行下面的CSS：
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
5. 弹性盒子
表 1. “flex-direction”属性的可选值及其含义
|
属性值 |
含义 |
|
row（默认值） |
主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。 |
|
row-reverse |
主轴为水平方向。排列顺序与页面的文档顺序相反。 |
|
column |
主轴为垂直方向。排列顺序为从上到下。 |
|
column-reverse |
主轴为垂直方向。排列顺序为从下到上。 |
条目的顺序
“order”属性的使用示例
|
1 2 3 |
.flex-item:last-child { order: -1; } |