CSS3资料整合

最新推荐文章于 2024-06-18 10:56:26 发布

许增强

最新推荐文章于 2024-06-18 10:56:26 发布

阅读量732

点赞数

分类专栏： jQuery & javaScript

本文链接：https://blog.csdn.net/xuzengqiang2/article/details/44223079

版权

jQuery & javaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

border-radius:兼容写法：

  -moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
  -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
  border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

text-shadow:兼容写法：

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是：
text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]...

box-shadow兼容写法：

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

Transform兼容写法：

 //Mozilla内核浏览器：firefox3.5+
  -moz-transform: rotate | scale | skew | translate ;
 //Webkit内核浏览器：Safari and Chrome
  -webkit-transform: rotate | scale | skew | translate ;
 //Opera
  -o-transform: rotate | scale | skew | translate ;
 //IE9
  -ms-transform: rotate | scale | skew | translate ;
 //W3C标准
  transform: rotate | scale | skew | translate ;

Transition兼容写法：多个属性同时使用，使用“，”分割

   //Mozilla内核
   -moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
   //Webkit内核
   -webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> 
   //Opera
   -o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
   //W3C 标准
   transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>

应用实例1、旋转的div层

Transition的完美应用，在div层初始化的时候使用transition:all 持续时间使用函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	*{margin:0;padding:0}
	.test{height:100px;width:100px;margin-top:20px;background:#3388CC;
		margin-left:20px;border-radius:3%;
		-webkit-transition:all .8s ease-in-out;
		-moz-transition:all .8s ease-in-out;
		transition:all .8s ease-in-out;}
	.test:hover{
		-webkit-transform:rotate(720deg);
		-moz-transform:rotate(720deg);
		-ms-transform:rotate(720deg);
		-o-transform:rotate(720deg);
		transform:rotate(720deg);
		background:#FF9900;	
	}
</style>
</head>

<body>
	<div class="test"></div>
</body>
</html>

这个时候当鼠标移上div层的时候，在0.8s内div层会从0度旋转720角，且背景色由#3388CC变成#FF9900，且移除鼠标的时候，div层会从720度角旋转回0度，颜色会由#FF9900变回#3388CC。

如果不考虑移除时回转，可以利用Animation实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../../jQuery/jquery-1.9.1.js"></script>
<style type="text/css">
	*{margin:0;padding:0}
	.test{height:100px;width:100px;margin-top:20px;background:#3388CC;
		margin-left:20px;
		-moz-border-radius:3%;
		-webkit-border-radius:3%;
		border-radius:3%;
	}
	@-moz-keyframes spinner{
		from {
			background:#3388CC;	
		}
		to{
			-moz-transform:rotate(720deg);
			transform:rotate(720deg);
			background:#FF9900;
		}
	}
	@-webkit-keyframes spinner{
		from {
			background:#3388CC;	
		}
		to{
			-webkit-transform:rotate(720deg);
			transform:rotate(720deg);
			background:#FF9900;
		}
	}
	@-o-keyframes spinner{
		from {
			background:#3388CC;	
		}
		to{
			-o-transform:rotate(720deg);
			transform:rotate(720deg);
			background:#FF9900;
		}
	}
	.test:hover {
		-moz-animation:spinner 1s ease-in-out;	
		-webkit-animation:spinner 1s ease-in-out;	
		-o-animation:spinner 1s ease-in-out;	
	}
</style>
</head>

<body>
	<div class="test"></div>
</body>
</html>