网友Adam‘分享CSS3学习demo

作者：管理员

发布时间：2012/12/18 23:34:33

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=192

文章由【网友Adam‘】提供

主要分享了以下5个demo功能

1、CSS3绘制 遨游LOGO

#logo 
{
	margin:40px auto;
	width: 240px;
	height: 240px;
	border-radius: 120px;
	border:1px solid rgba(68,158,228,.5);
	box-shadow: 3px 3px 5px rgba(0,0,0,.5);
	background:#8dd0f3;
	position:relative;
}

#in-radius 
{
	width: 230px;
	height: 230px;
	border-radius: 120px;
	background:#3b99e3;
	background:-webkit-repeating-linear-gradient(top, #84d4ff, #3b99e3);
	background:-moz-repeating-linear-gradient(top, #84d4ff, #3b99e3);
	background:-ms-repeating-linear-gradient(top, #84d4ff, #3b99e3);
	/*background:#3b99e3;*/
	position:absolute;
	left:5px;
	top:5px;
}
#elem 
{
	box-shadow:-2px -2px 0 rgba( 0, 0, 0, .2 );
	background:#fff;
	width: 150px;
	height: 100px;
	position:absolute;
	top:70px;
	left:42px;
	border-radius:3px 20px 3px 3px;
}
#mark
{
	width: 85px;
	height: 95px;
	background:#3b99e3;
	background:-webkit-repeating-linear-gradient(top, #64baf3, #46a2e7);
	background:-moz-repeating-linear-gradient(top, #64baf3, #46a2e7);
	background:-ms-repeating-linear-gradient(top, #64baf3, #46a2e7);
	position: absolute;
	top:30px;
	left:33px;
}
#mark-2 
{
	box-shadow:-2px -2px 0 rgba( 0, 0, 0, .2 );
	position:absolute;
	left:25px;
	top:25px;
	background:#fff;
	height:45px;
	width:35px;
}

 

2、文字阴影特效

#demo1
{ 
	border:5px solid black;
	height:200px;
	width:440px;
	line-height:200px; 
	text-align:center;
	font-weight:bolder;
	font-family:"微软雅黑";
	font-size:40px;
	color:#fff;
	/* 渐变*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999',endColorstr='#000000',GradientType='0');
	background:-webkit-repeating-linear-gradient(top, #999, #000);
	background:-moz-repeating-linear-gradient(top, #999, #000);
	background:-ms-repeating-linear-gradient(top, #999, #000);
	background:-o-repeating-linear-gradient(top, #999, #000);
	
	/* webkit 文字阴影 */
	text-shadow:2px 2px 0px #000000, 2px 2px 4px #ffffff;	
	/* 动画*/
	transition:500ms color ease,500ms border ease;
	-o-transition:500ms color ease,500ms border ease;
	-ms-transition:500ms color ease,500ms border ease;
	-moz-transition:500ms color ease,500ms border ease;
	-webkit-transition:500ms color ease,500ms border ease;	
}

 

3、图片切换特效

#demo2
{
	margin-top:40px;
	height:300px;
	width:440px;
	background:url(html5.png) no-repeat 0 0, url(fj.png) no-repeat 0 0;
	border:1px solid #000;
	/* 动画*/
	transition:0.5s all ease-in-out;
	-o-transition:0.5s all ease-in-out;
	-ms-transition:0.5s all ease-in-out;
	-moz-transition:0.5s all ease-in-out;
	-webkit-transition:0.5s all ease-in-out;
	
	/* 盒子阴影 */
	 box-shadow:5px 5px 10px 5px rgba(0,0,0,0.8);
	 
	 /* 圆角 */
	border-radius: 11px;
	/*behavior: url(ie-css3.htc);*/
}
#demo2:hover
{
	background-position:0 300px,0 0;
}

 

4、遮罩层特效

#demo3
{
	margin-top:40px;
	height:200px;
	width:420px;
	font-weight:bolder;
	line-height:200px;
	background:url(fj.png) no-repeat;
	-webkit-background-clip:text;
	font-size:80px;
	color:rgba( 0, 0, 0, 0.1 );
	border:10px solid #000;
	box-shadow:5px 5px 10px 5px rgba(0,0,0,0.8);
	-webkit-transition:500ms background-position ease;
	
	border-radius: 11px;
	/*behavior: url(ie-css3.htc);*/
}
#demo3:hover
{
	background-position:0 -100px;
}

 

5、图片摇晃特效

#demo4
{
	margin:50px auto;
	transition:.4s ease-in;
	-moz-transition:.4s ease-in;
	-o-transition:.4s ease-in;
	-webkit-transition:.4s ease-in;
	-ms-transition:.4s ease-in;
}
#demo4:hover
{
	transform: rotate(-9deg);
	-moz-transform: rotate(-9deg);
	-o-transform: rotate(-9deg);
	-webkit-transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
}

 

效果如下：

在线演示：http://www.jq-school.com/upload/adamcss3/demo.html

附件下载：http://www.jq-school.com/upload/adamcss3.rar

关键字：css3