css背景以及伸缩模式布局笔记

引入外部字体

@font-face{
   
font-family: myFirstFont;
src: url('font/icomoon.ttf')
	 ,url('font/icomoon.eot') ; /* IE9 */ 
}

div::after{
   
	font-family:myFirstFont;/*一定要和声明的font-family: "myFirstFont"相同 否则没有效果;*/
	/* content: '\e909'; */
	content: '\e90b';
	font-size: 100px;
	color: blue;
}

.TTF或.OTF，适用于Firefox 、Safari、Opera
.EOT，适用于Internet Explorer 4.0+
.SVG，适用于Chrome、IPhone
.WOFF，大多数浏览器都支持，最为推荐
这些字体的格式在代码中应按照下面的顺序显示：.eot .woff .ttf/.otf .svg

matrix

• matrix()方法和2D变换方法合并成一个。
• matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);
 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

transition 具体属性

transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;

transition:width 1s linear 2s;

animation alternate[交替] infinite[无限]

• 先正到反 循环交替

div{
   
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

 @keyframes myfirst{
   
	0%   {
   background:red; left:0px; top:0px;}
	25%  {
   background:yellow; left:200px; top:0px;}
	50%  {
   background:blue; left:200px; top:200px;}
	75%  {
   background:green; left:0px; top:200px;}
	100% {
   background:red; left:0px; top:0px