css3实现闪亮进度条效果

效果图如下：

css3实现闪亮进度条效果

html源码：

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>New Pure CSS3 Progress Bars Demonstration</title>

<meta name="description" content="Pure CSS3 progress bars demonstration by inWebson.com"/>

<meta name="keywords" content="demonstration,demo,css3,progress,bar,loading,preloader,inwebson"/>

<link rel="stylesheet" media="all" href="vendor.css">

<link rel="stylesheet" media="all" href="style.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

$(document).ready( function() {

	var delay = 0;

	$('.bar').children('span').each( function() {

		var num = Math.floor(Math.random()*8)+2;

		$(this)

		.width(0)

		.delay(delay)

		.animate({

			'width': (num*10)+'%'

		}, 3000);

		delay += 1500;

	});

	

	$('.source span').on('click', function() {

		$(this)

		.toggleClass('active')

		.next().slideToggle(700);

	});

	$('.source pre').slideUp(0);

});

</script>

</head>

<body>







<!-- Content -->

<section id="wrapper">

	<div class="content-inner">

		

		<section id="basic-bar" class="holder">

			<h3>基本类型</h3>

			<div class="bar color0">

				<span></span>

			</div>

			<div class="source">

				<span>View Source</span>

<pre>

<!-- HTML -->

<div class="bar color0">

	<span></span>

</div>

<hr/><!-- CSS -->

.bar {

	margin: 5px 0 3px;

	border: 6px solid #333;

	background: #333;

	overflow: hidden;

	border-radius: 50px;

	-moz-border-radius: 50px;

	-webkit-border-radius: 50px;

	box-shadow: 1px 1px 1px #777;

	-moz-box-shadow: 1px 1px 1px #777;

	-webkit-box-shadow: 1px 1px 1px #777;

}

.bar > span {

	display: block;

	height: 20px;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

}



.color0 > span {

	background-color: #FF9932;

}

</pre>				

			</div>

		</section>

		

		<section id="gradient-bar" class="holder">

			<h3>绿色渐变</h3>

			<div class="bar gradient color1">

				<span></span>

			</div>

			<div class="source">

				<span>View Source</span>

<pre>

<!-- HTML -->

<div class="bar gradient color1">

	<span></span>

</div>

<hr/><!-- CSS -->

.gradient > span {

	box-shadow: 

		0 5px 5px rgba(255,255,255,0.6) inset, 

		0 -5px 7px rgba(0, 0, 0, 0.4) inset;

	-moz-box-shadow: 

		0 5px 5px rgba(255,255,255,0.6) inset, 

		0 -5px 7px rgba(0, 0, 0, 0.4) inset;

	-webkit-box-shadow: 

		0 5px 5px rgba(255,255,255,0.6) inset, 

		0 -5px 7px rgba(0, 0, 0, 0.4) inset;

	filter: progid:DXImageTransform.Microsoft.gradient( 

		startColorstr='#33ffffff', 

		endColorstr='#33000000',

		GradientType=0 );

}



.color1 > span {

	background-color: #90EE90;

}

</pre>				

			</div>

		</section>

		

		<section id="gloss-bar" class="holder">

			<h3>黄色渐变</h3>

			<div class="bar gradient gloss color2">

				<span></span>

			</div>

			<div class="source medium">

				<span>View Source</span>

<pre>

<!-- HTML -->

<div class="bar gradient gloss color2">

	<span></span>

</div>

<hr/><!-- CSS -->

.gloss > span {

	background-image: -moz-linear-gradient(top, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: -webkit-gradient(linear, left top, left bottom, 

		color-stop(0%,rgba(255,255,255,0.2)), 

		color-stop(45%,rgba(255,255,255,0.1)), 

		color-stop(55%,rgba(0,0,0,0.2)), 

		color-stop(100%,rgba(0,0,0,0.1)));

	background-image: -webkit-linear-gradient(top, 

		rgba(255,255,255,0.5) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: -o-linear-gradient(top, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: -ms-linear-gradient(top, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: linear-gradient(to bottom, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

}



.color2 > span {

	background-color: #dbf043;

}

</pre>				

			</div>

		</section>

		

		<section id="stripe-bar" class="holder">

			<h3>蓝色条纹</h3>

			<div class="bar gradient stripe color3">

				<span></span>

			</div>

			<div class="source medium">

				<span>View Source</span>

<pre>

<!-- HTML -->

<div class="bar gradient stripe color3">

	<span></span>

</div>

<hr/><!-- CSS -->

.stripe > span {

	background-size:30px 30px;

	-moz-background-size:30px 30px;

	-webkit-background-size:30px 30px;

	-o-background-size:30px 30px;



	background-image: -moz-linear-gradient(-45deg, 

		rgba(255,255,255,0.15) 0%, 

		rgba(255,255,255,0.15) 25%, 

		rgba(255,255,255,0) 25%, 

		rgba(255,255,255,0) 50%, 

		rgba(255,255,255,0.15) 50%, 

		rgba(255,255,255,0.15) 75%, 

		rgba(255,255,255,0) 75%, 

		rgba(255,255,255,0) 100%);

	background-image: -webkit-gradient(linear, left top, right bottom, 

		color-stop(0%,rgba(255,255,255,0.2)), 

		color-stop(25%,rgba(255,255,255,0.2)), 

		color-stop(25%,rgba(255,255,255,0)), 

		color-stop(50%,rgba(255,255,255,0)), 

		color-stop(50%,rgba(255,255,255,0.2)), 

		color-stop(75%,rgba(255,255,255,0.2)),

		color-stop(75%,rgba(255,255,255,0)),

		color-stop(100%,rgba(255,255,255,0)));

	background-image: -webkit-linear-gradient(-45deg, 

		rgba(255,255,255,0.3) 0%,

		rgba(255,255,255,0.3) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.3) 50%,

		rgba(255,255,255,0.3) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

	background-image: -o-linear-gradient(-45deg, 

		rgba(255,255,255,0.15) 0%,

		rgba(255,255,255,0.15) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.15) 50%,

		rgba(255,255,255,0.15) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

	background-image: -ms-linear-gradient(-45deg, 

		rgba(255,255,255,0.15) 0%,

		rgba(255,255,255,0.15) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.15) 50%,

		rgba(255,255,255,0.15) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

	background-image: linear-gradient(135deg, 

		rgba(255,255,255,0.15) 0%,

		rgba(255,255,255,0.15) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.15) 50%,

		rgba(255,255,255,0.15) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

}



.color3 > span {

	background-color: #4169E1;

}

</pre>				

			</div>

		</section>

		

		<section id="stripe-animated-bar" class="holder">

			<h3>动画条纹</h3>

			<div class="bar gradient stripe color4">

				<span class="animate"></span>

			</div>

			

			<div class="source medium">

				<span>View Source</span>

<pre>

<!-- HTML -->

<div class="bar gradient stripe color4">

	<span class="animate"></span>

</div>

<hr/><!-- CSS -->

.color4 > span {

	background-color: #4169E1;

}



.animate {

	animation: progress 2s linear infinite;

	-moz-animation: progress 2s linear infinite;

	-webkit-animation: progress 2s linear infinite;

	-ms-animation: progress 2s linear infinite;

	-o-animation: progress 2s linear infinite;

}



@-webkit-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@-moz-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@-ms-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@-o-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

</pre>				

			</div>

		</section>

		

		<section id="threed-animated-bar" class="holder">

			<h3>3D效果</h3>

			<div class="bar gradient pattern2 color5">

				<span class="animate"></span>

			</div>

			<div class="source medium">

				<span>View Source</span>

<pre>

<!-- HTML -->

<div class="bar gradient stripe color6">

	<span></span>

</div>

<hr/><!-- CSS -->

.pattern2 > span {

	background-size: 10px 60px; 

	background-position: 0;

	background-image: -moz-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: -webkit-gradient( radial, center center, 0, center center, 60, 

		color-stop(0, rgba(255,255,255,.9)), 

		color-stop(20%, rgba(255,255,255,.2)), 

		color-stop(40%, rgba(255,255,255,0)),

		color-stop(100%, rgba(255,255,255,0)));

	background-image: -webkit-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: -o-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: -ms-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: radial-gradient(ellipse at center, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);	

}



.color5 > span {

	background-color: #4169E1;

}

</pre>				

			</div>

		</section>

		

		<section id="pattern-animated-bar" class="holder">

			<h3>动画渐变</h3>

			<div class="bar gradient pattern color6">

				<span>

					<span class="animate"></span>

				</span>

			</div>

			<div class="source medium">

				<span>View Source</span>

<pre>

<!-- HTML -->

<div class="bar gradient pattern color6">

	<span>

		<span class="animate"></span>

	</span>	

</div>

<hr/><!-- CSS -->

.pattern > span {

	background-size: 13px, 29px, 37px, 53px;

	background-image: 

		-moz-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-moz-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-moz-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-moz-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		-webkit-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-webkit-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-webkit-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-webkit-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,.07)), 

			color-stop(50%,rgba(255,255,255,.07)), 

			color-stop(50%,rgba(255,255,255,0)),

			color-stop(50%,rgba(255,255,255,0))),

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,.13)), 

			color-stop(50%,rgba(255,255,255,.13)), 

			color-stop(50%,rgba(255,255,255,0)),

			color-stop(50%,rgba(255,255,255,0))),

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0.17)),

			color-stop(50%,rgba(255,255,255,0.17))),

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0.19)),

			color-stop(50%,rgba(255,255,255,0.19)));

	background-image: 

		-o-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-o-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-o-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-o-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		-ms-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-ms-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-ms-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-ms-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		linear-gradient(to right, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		linear-gradient(to right, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		linear-gradient(to right, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		linear-gradient(to right, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

}

.pattern > span > span {

	display:block;

	height:100%;

	width:100%;

	

	border-radius:5px;

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	background-size: 12px;

	

	background-image: -moz-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

	background-image: -webkit-gradient(linear, left top, right top, 

		color-stop(0%,rgba(255,255,255,0.1)), 

		color-stop(50%,rgba(255,255,255,0.1)), 

		color-stop(50%,rgba(255,255,255,0)));

	background-image: -webkit-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

	background-image: -o-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

	background-image: -ms-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);	

	background-image: linear-gradient(to right, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

}



.color6 > span {

	background-color: #026873;

}

</pre>				

			</div>

		</section>

		

	</div>

	

</section>



</body>

</html>

style.css：

.holder{

	position:relative;

	margin-bottom:10px;

}

.content-inner{

	width:500px;

	margin:0 auto;

}

.content-inner h3{

	color:#fff;

	margin:0 10px;

}

.content-inner .source.wide{

	width:1000px;

	margin-left:-250px;

}

.content-inner .source.medium{

	width:650px;

	margin-left:-75px;

}

.content-inner .source span{

	position:absolute;

	top:7px;

	right:10px;

	color:#35BFFF;

	font-size:12px;

	cursor:pointer;

}

.content-inner .source span:after{

	content:' + ';

}

.content-inner .source span.active{

	color:#666;

}

.content-inner .source span.active:after{

	content:' - ';

}

.content-inner .source pre{

	color:#ccc;

	background:#000;

	border:1px solid #333;

	padding:7px 15px;

	box-shadow:0 0 7px #333;

}

.content-inner .source pre hr{

	border:none;

	border-bottom:1px dashed #333;

} 



.bar{

	margin:5px 0 3px;

	border:6px solid #333;

	background:#333;

	overflow:hidden;

	

	border-radius:50px;

	-moz-border-radius:50px;

	-webkit-border-radius:50px;

	box-shadow:1px 1px 1px #777;

	-moz-box-shadow:1px 1px 1px #777;

	-webkit-box-shadow:1px 1px 1px #777;

}

.bar > span{

	display:block;

	height:20px;

	width:20%;

	

	border-radius:5px;

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

}

.gradient > span{

	box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;

	-moz-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;

	-webkit-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33000000',GradientType=0 );

}



.gloss > span{

	background-image: -moz-linear-gradient(top, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: -webkit-gradient(linear, left top, left bottom, 

		color-stop(0%,rgba(255,255,255,0.2)), 

		color-stop(45%,rgba(255,255,255,0.1)), 

		color-stop(55%,rgba(0,0,0,0.2)), 

		color-stop(100%,rgba(0,0,0,0.1)));

	background-image: -webkit-linear-gradient(top, 

		rgba(255,255,255,0.5) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: -o-linear-gradient(top, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: -ms-linear-gradient(top, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

	background-image: linear-gradient(to bottom, 

		rgba(255,255,255,0.2) 0%, 

		rgba(255,255,255,0.1) 45%, 

		rgba(0,0,0,0.2) 55%, 

		rgba(0,0,0,0.1) 100%);

}



.stripe > span{

	background-size:30px 30px;

	-moz-background-size:30px 30px;

	-webkit-background-size:30px 30px;

	-o-background-size:30px 30px;

	

	background-image: -moz-linear-gradient(-45deg, 

		rgba(255,255,255,0.15) 0%, 

		rgba(255,255,255,0.15) 25%, 

		rgba(255,255,255,0) 25%, 

		rgba(255,255,255,0) 50%, 

		rgba(255,255,255,0.15) 50%, 

		rgba(255,255,255,0.15) 75%, 

		rgba(255,255,255,0) 75%, 

		rgba(255,255,255,0) 100%);

	background-image: -webkit-gradient(linear, left top, right bottom, 

		color-stop(0%,rgba(255,255,255,0.2)), 

		color-stop(25%,rgba(255,255,255,0.2)), 

		color-stop(25%,rgba(255,255,255,0)), 

		color-stop(50%,rgba(255,255,255,0)), 

		color-stop(50%,rgba(255,255,255,0.2)), 

		color-stop(75%,rgba(255,255,255,0.2)),

		color-stop(75%,rgba(255,255,255,0)),

		color-stop(100%,rgba(255,255,255,0)));

	background-image: -webkit-linear-gradient(-45deg, 

		rgba(255,255,255,0.3) 0%,

		rgba(255,255,255,0.3) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.3) 50%,

		rgba(255,255,255,0.3) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

	background-image: -o-linear-gradient(-45deg, 

		rgba(255,255,255,0.15) 0%,

		rgba(255,255,255,0.15) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.15) 50%,

		rgba(255,255,255,0.15) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

	background-image: -ms-linear-gradient(-45deg, 

		rgba(255,255,255,0.15) 0%,

		rgba(255,255,255,0.15) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.15) 50%,

		rgba(255,255,255,0.15) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

	background-image: linear-gradient(135deg, 

		rgba(255,255,255,0.15) 0%,

		rgba(255,255,255,0.15) 25%,

		rgba(255,255,255,0) 25%,

		rgba(255,255,255,0) 50%,

		rgba(255,255,255,0.15) 50%,

		rgba(255,255,255,0.15) 75%,

		rgba(255,255,255,0) 75%,

		rgba(255,255,255,0) 100%);

}



.pattern > span{

	background-size: 13px, 29px, 37px, 53px;

	background-image: 

		-moz-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-moz-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-moz-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-moz-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		-webkit-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-webkit-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-webkit-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-webkit-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,.07)), 

			color-stop(50%,rgba(255,255,255,.07)), 

			color-stop(50%,rgba(255,255,255,0)),

			color-stop(50%,rgba(255,255,255,0))),

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,.13)), 

			color-stop(50%,rgba(255,255,255,.13)), 

			color-stop(50%,rgba(255,255,255,0)),

			color-stop(50%,rgba(255,255,255,0))),

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0.17)),

			color-stop(50%,rgba(255,255,255,0.17))),

		-webkit-gradient(linear, left top, right top, 

			color-stop(0%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0)), 

			color-stop(50%,rgba(255,255,255,0.19)),

			color-stop(50%,rgba(255,255,255,0.19)));

	background-image: 

		-o-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-o-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-o-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-o-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		-ms-linear-gradient(left, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		-ms-linear-gradient(left, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		-ms-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		-ms-linear-gradient(left, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

	background-image: 

		linear-gradient(to right, 

			rgba(255,255,255,0.07) 0%, 

			rgba(255,255,255,0.07) 50%, 

			transparent 50%),

		linear-gradient(to right, 

			rgba(255,255,255,0.13) 0%, 

			rgba(255,255,255,0.13) 50%, 

			transparent 50%),

		linear-gradient(to right, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.17) 50%),

		linear-gradient(to right, 

			transparent 0%, 

			transparent 50%, 

			rgba(255,255,255,0.19) 50%);

}

.pattern > span > span{

	display:block;

	height:100%;

	width:100%;

	

	border-radius:5px;

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	background-size: 12px;

	

	background-image: -moz-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

	background-image: -webkit-gradient(linear, left top, right top, 

		color-stop(0%,rgba(255,255,255,0.1)), 

		color-stop(50%,rgba(255,255,255,0.1)), 

		color-stop(50%,rgba(255,255,255,0)));

	background-image: -webkit-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

	background-image: -o-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

	background-image: -ms-linear-gradient(left, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);	

	background-image: linear-gradient(to right, 

		rgba(255,255,255,0.1) 0%, 

		rgba(255,255,255,0.1) 50%, 

		transparent 50%);

}



.pattern2 > span{

	background-size: 10px 60px; 

	background-position: 0;

	background-image: -moz-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: -webkit-gradient( radial, center center, 0, center center, 60, 

		color-stop(0, rgba(255,255,255,.9)), 

		color-stop(20%, rgba(255,255,255,.2)), 

		color-stop(40%, rgba(255,255,255,0)),

		color-stop(100%, rgba(255,255,255,0)));

	background-image: -webkit-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: -o-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: -ms-radial-gradient(center, ellipse cover, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);

	background-image: radial-gradient(ellipse at center, 

		rgba(255,255,255,.9) 0%,

		rgba(255,255,255,.2) 20%,

		transparent 40%);	

}



.bar.color0 > span{

	background-color:#FF9932;

}

.bar.color1 > span{

	background-color:#90EE90;

}

.bar.color2 > span{

	background-color:#dbf043;

}

.bar.color3 > span{

	background-color:#4169E1;

}

.bar.color4 > span{

	background-color:#DA70D6;

}

.bar.color5 > span{

	background-color:#000;

}

.bar.color6 > span{

	background-color:#026873;

}





.animate{

	animation:progress 2s linear infinite;

	-moz-animation:progress 2s linear infinite;

	-webkit-animation:progress 2s linear infinite;

	-ms-animation:progress 2s linear infinite;

	-o-animation:progress 2s linear infinite;

}



@-webkit-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@-moz-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@-ms-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@-o-keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

@keyframes progress {

  from {

    background-position: 0 0;

  }

  to {

    background-position: -60px -60px;

  }

}

vendor.css：

body{

	font-family:Cambria, Georgia, serif;

	line-height:1.6em;

	font-size:100%;

	background:url(bg.png) 0 0 repeat;

	margin:0;

	padding:0;

}

header, section, footer, nav, hgroup{

	display:block;

}

a{

	color:#35BFFF;

	text-decoration:none;

	transition:all 1s;

	-moz-transition:all 1s;

	-webkit-transition:all 1s;

	-ms-transition:all 1s;

	-o-transition:all 1s;

}

a:hover, a:active{

	color:#91DCFF;

}

img{

	max-width:100%;

}

a img{

	border:none;

}



/* Header */

#header{

	width:100%;

	background:#000;

	background:rgba(0, 0, 0, 0.8);

	color:#ccc;

	letter-spacing:1px;

	margin-bottom:20px;

	padding:3px 0;

	position:relative;

	box-shadow:0 3px 10px #333;

	-moz-box-shadow:0 3px 10px #333;

	-webkit-box-shadow:0 3px 10px #333;

	top:0;

	left:0;

	z-index:99;

}

#header h1{

	padding:0 20px;

	margin:10px 0;

	text-shadow:1px 1px 0 #FFF, 2px 1px 1px #CCC;

	float:left;

}

#backlinks{

	float:right;

	padding:5px 20px;

	line-height:1.6em;

	font-weight:bold;

	font-size:11px;

	font-family:'arial narrow', arial;

}

#backlinks a{

	text-align:right;

	display:block;

}



/* Footer */

#footer{

	position:relative;

	bottom:0;

	left:0;

	padding-left:20px;

	line-height:25px;

	color:#888;

	font-size:13px;

	background:rgb(0, 0, 0);

	background:rgba(0, 0, 0, 0.8);

	box-shadow:0 -3px 10px #333;

	-moz-box-shadow:0 -3px 10px #333;

	-webkit-box-shadow:0 -3px 10px #333;

	z-index:99;

}

#footer span{

	display:inline-block;

}



/* content header */

#wrapper{

	position:relative;

	margin:3em auto;

}

#wrapper h2{

	margin:0;

	color:#0082E0;

	text-shadow:1px 1px 1px #777;

	font-size:33px;

	font-family:Arial Narrow, Arial, sans-serif;

}

#wrapper h2 span{

	color:#56B8FF;

}

#wrapper hgroup h3{

	font-style:italic;

	font-weight:normal;

	font-size:18px;

	text-shadow:0 1px 0 #fafafa;

	color:#444;

	margin:0;

}

.description{

	font-style:italic;

	font-size:15px;

	color:#aaa;

}





#ad-holder{

	position:absolute;

	top:-40px;

	right:10px;

}

#ad-holder div{

	text-align:right;

}

#ad-holder a{

	color:#ccc;

	font-size:15px;

	font-style:italic;

	padding-left:10px;

}



/* clearfix */

.clearfix {

	clear:both;

}

你可能感兴趣的:(css3)

流星雨特效css3 你的美，让我痴迷 css CSS动画 HTML5 星系背景关键帧视觉艺术
*{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;}section{position:absolute;top:0;left:0;width:100%;height:100vh;background:url(img/xingkong.jpg);background-position-x:center;backgroun
CSS3 用户界面设计指南 froginwe11 开发语言
CSS3用户界面设计指南引言随着互联网的快速发展，用户界面设计已经成为网站和应用程序吸引和留住用户的关键因素之一。CSS3，作为Web开发中的核心技术之一，提供了丰富的工具和特性来改善用户界面。本文将深入探讨CSS3在用户界面设计中的应用，包括基本概念、常用技巧以及实际案例分析。CSS3用户界面基本概念1.媒体查询媒体查询（MediaQueries）是CSS3的一个重要特性，它允许开发者根据不同的
HTML5和CSS3 ningmengjing_ 前端 html5 css3 前端
一、CSS权重CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。1.权重的等级可以把样式的应用方式分为几个等级，按照等级来计算权重！important，加在样式属性值后，权重值为10000内联样式，如：style="",权重值为1000ID选择器，如：#content，权重值为100类，伪类和属性选择器，如：con
html中box标签的作用,CSS3的box-sizing属性的作用及使用 cocoaitea html中box标签的作用
先用大白话通俗说一下，先给div设置宽高为200px,这是在加上padding：10px;,此时div宽高加上padding值后实际宽高变成了220px(等于上下左右各加了10px的padding),那么我又给div加了一个border1px，此时div的实际宽高变成了221px。此时在给div加上box-sizing:border-box后，div的总宽高就会变为200px,也就是说此时padd
前端学习——CSS3实现时钟效果 younger_LF 前端（HTML+CSS+JS）CSS动画时钟效果
CSS3实现时钟效果最近想开始认真学习，然后想把学习记录下来，就写在博客这里了。最先是用CSS实现的是一个时钟的效果，如下图：实现效果1.圆盘说到时钟，肯定最先想到的是一个圆，所以就从一个圆开始。先写一个div，然后给相关的样式.clock{position:absolute;width:250px;height:250px;left:50%;top:50%;transform:translate
HTML5+CSS3 weixin_34250709
2019独角兽企业重金招聘Python工程师标准>>>第一课HTML5结构HTML5是新一代的HTMLDTD声明改变新的结构标签注意的地方ie8不兼容常用的一些新的结构标签删除的HTML标签纯表现的元素：basefontbigcenterfontsstrikettu对可用性产生负面影响的元素：frameframesetnoframes产生混淆的元素：acronymappletisindexdir重
新手教程，小白学web前端开发—HTML5+css3 皆非本人前端 html5 css3
小白教程，一起来跟我学简单的网页制作吧！本书教材：web前端开发案例教程—HTML5+css3简介：2005年以后，互联网进入了web2.0的时代，各种类似的桌面软件的web应用大量涌现，网站的前端，由此发生了翻天覆地的变化。网站不再只承载单一的文字和图片，各种丰富的媒体让网页的内容更加生动，网页的各种交互形式为用户带来了更好的体验，都基于前端的技术实现，好了废话不多说，让我们简单的体验一下如何制
零基础学习HTML(8)——pre标签、code标签 Dragon水魅零基础学习Web开发 html
文章目录官方资料学习正文注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文pre标签：htt
前端开发手册大全而已 web javascript css html jquery css3
web前端开发手册大全(学习参考)html中文中文参考手册：https://www.html.cn/shouce/html/1.htmlJavaScript中文参考手册：https://www.html.cn/shouce/js/11.htmlCSS3.0参考手册：https://www.html.cn/doc/css3/CSS教程手册（新）：https://www.html.cn/book/cs
Sass 教程 shengyin714959 笔记 sass 前端 css
Sass(英文全称：SyntacticallyAwesomeStylesheets)是一个最初由HamptonCatlin设计并由NatalieWeizenbaum开发的层叠样式表语言。Sass是一个CSS预处理器。Sass是CSS扩展语言，可以帮助我们减少CSS重复的代码，节省开发时间。Sass完全兼容所有版本的CSS。Sass扩展了CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特
JavaScript+CSS2+CSS3中文手册大全远方之巅
本文还有配套的精品资源，点击获取简介：JavaScript是一种用于网页动态效果和交互功能的脚本语言，与HTML和CSS共同构建富互联网应用。CSS2和CSS3作为网页样式的语言，增强了网页设计的布局控制和用户体验。本手册集提供了这三种技术的详细指南，包括基本语法、函数、对象操作、DOM操作、事件处理、BOM、AJAX以及ES6的新特性，同时深入介绍了CSS2的盒模型、布局技巧和CSS3的媒体查询
前端面试100问！！一只松 javascript es6
面试造火箭，工作拧螺丝！在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。本课程帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。1、HTML(5)和CSS3方面1
css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框 weixin_39953102 css3实现缺角四边形
前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。话不多说，放个效果图先缺角CSS3实现缺角矩形，折角矩形以及缺角边框-1.png(10.03KB,下载次数:0)2020-7-2219:03上传1.伪元素实现.bg{width:120px;height:80p
css3实现缺角四边形_CSS3绘制六边形的简单实现陈宇直 css3实现缺角四边形
因为很简单，所以先总结一下：使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素，并利用css3的边框样式，将这两个元素变成三角形放置在源元素的两端即可。(因为之前在生物公司工作过，觉得六边形更贴近生物分子、基因等概念，包括我们在网上搜索关于生物分子、基因等图片，好多也有六边形的样式，所以那时候在页面做一些功能性的导航或Tag，都会觉得六边形更贴近一些)。
CSS3过渡效果小练习-进度条 nuomi_w css3 css 前端
Document.bar{width:150px;height:15px;border:1pxsolidred;border-radius:7px;}.bar_in{width:50%;height:100%;background-color:red;transition:all0.8s;}.bar:hover.bar_in{width:100%;border-radius:7px;}
html+css 实现发光倒影按钮宝码香车 #html+css+js 绚丽按钮 html css 前端
效果html+css鼠标悬停，发光倒影按钮原理解析通过a元素的hover效果实现的过渡动画:给a元素定义一个初始值，当hover时，改变这个值。这里是给a元素定义一个css3的过渡动画。当hover时改变这个过渡动画的参数。
css3-文字外发光效果风云变色z h5+css3+js css3 css 前端
css3中有一个文字阴影的效果，可以使用该效果制作文字的外发光效果。这种效果在不方便使用图片的时候可以达到更好的效果。制作步骤如下：1、首先了解一下使用的csstext-shadow:5px5px5px#FF0000;效果是这样的：2、然后改造一下text-shadow:003px#FF0000;3、了解一下原理text-shadow的几个参数的解释分别如下：必需。水平阴影的位置。允许负值。必需。
CSS3 圆角：实现与优化指南 froginwe11 开发语言
CSS3圆角：实现与优化指南随着网页设计的发展，CSS3圆角已经成为了现代网页设计中不可或缺的元素之一。本文将详细讲解CSS3圆角的基本用法、实现方式以及优化技巧，帮助您在网页设计中更好地运用这一功能。一、CSS3圆角基本用法1.1基本概念CSS3圆角指的是网页元素边角的弯曲程度，通过修改元素的边框属性来实现。在CSS3之前，实现圆角主要依赖于图像处理或JavaScript。1.2选择器CSS3圆
Css3重点知识讲解 Warren98 css3 前端 css 笔记学习开发语言 html5
选择器优先级：id选择器>类选择器>标签选择器类选择器：.myClass{color:blue;}id选择器（全局唯一）：#myId{color:green;}标签选择器：p{color:red;}层次选择器：/*后代选择器AB*/.nava{color:blue;}/*子选择器A>B*/.card>h2{color:red;}/*相邻兄弟选择器A+B（相邻向下）*/h1+p{font-size:
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus IT木昜 vue vue全家桶 vue 前端框架 javascript css3 es6
vue报错：[Intervention]Ignoredattempttocancelatouchmoveeventwithcancelable=false,forexamplebecausescrollingisinprogressandcannotbeinterrupted解决方案：使用css3touch-action:none;touch-action：当你触摸并按住触摸目标时候，禁止或显示系
HTML5、CSS3面试题 Xu.Youth 大数据
目录1、说一说H5新标签？2、CSS3的新特性？3、如何实现一个盒子水平垂直居中？4、你是怎么理解BFC的？5、说一说盒子模型？6、如何画一个三角形？7、说一些块级元素和行内元素8、简单聊一聊重排和回流？9、文本超出部分显示省略号？10、说一说清除浮动的方式？11、请你说一说css的选择器，以及优先级12、来说一说CSS3的过渡？13、简单聊一聊CSS3的2D、3D转换14、说一说CSS3的动画？
【无标题】是懒羊羊吖～笔记
一.WED前端应用软件：c/s架构b/s架构web前端：html5css3javascripthtml5：超文本标记语言----超链接，文字，标签标签语法规范：结束-----双标签标签体------可以嵌套inputimg---------单标签属性：定制元素的行为，属性是不通用的，每一个标签存在自身的属性，当属性名等于属性值时,只需要写属性名，不需要写属性值。二.HTML1.样式//文档声明：告
HTML5+CSS3【容器元素、 HTML5新增布局标签、视频和音频、HTML5新增标签】(五)-全面详解（学习总结---从入门到深化）童小纯前端系列---从入门到深化 css3 html5
作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步如果感觉博主的文章还不错的话，请三连支持一下博主哦博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人目录容器元素（div）学习效果反馈HTM
【Three.js】JS 3D library（一个月进化史） Tiffany_Ho 前端 Three.js
#春节过完了，该继续投入学习了~作为一个平面开发者，想要增进更多的技能，掌握web3D开发#前置知识与技能1.JavaScript基础-掌握ES6+语法（类、模块、箭头函数、解构等）-熟悉异步编程（Promise、async/await）-了解事件循环和DOM操作2.HTML5和CSS3-熟悉Canvas和WebGL的基础概念-了解CSS3动画和变换（transform、transition）3.
表格首列，首行固定，并且能随意滚动一麻袋小猫笔记 css3
css3新增了粘性定位，利用粘性定位即可做到，但要注意的是：如果想要粘性定位相对于父元素定位，需要给其增加relative定位。逻辑是：滚动盒子滚动的是页面，滚动盒子内部放一个大盒子（1），此盒子宽度为内容的总宽度，在盒子内部给想要固定的盒子增加粘性定位，让其top值||left值为0，这里的0是相对于盒子1的。
前端知识速记--css篇：CSS3中的常见动画及实现方式无限大. #前端知识速记前端 css css3
前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
CSS动画与变形玲玲酱 #CSS3 前端 html5 css3
CSS动画-Animations由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任
CSS3动画属性：转换(transition) 前端独秀前端 css3 transition
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时
看到别人用css3写的baymax ，大白，挺萌的 a_water_drop
http://www.w3cfuns.com/blog-5455933-5404334.html这是作者博客，转载和使用请标明。无标题文档*{margin:0;padding:0;}body{background:#999;}.Baymax{width:300px;height:600px;margin:20pxautoautoauto;position:relative;}.head{width
@media使用方法孩子你要相信光 CSS HTML css html 前端
@media是CSS3中的一个重要特性，它允许我们根据设备的特性（如设备的宽度、高度、方向、分辨率等）来应用不同的样式规则。下面是@media的使用方法，按照清晰的结构进行分点表示和归纳：1.基本语法@media的基本语法如下：@mediamediaTypeand(mediaFeature){/*CSS样式规则*/}4.示例mediaType：媒体类型，常见的媒体类型包括all（所有设备）、scr
jdk tomcat 环境变量配置 Array_06 java jdk tomcat
Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。电脑-->右击属性-->高级环境变量-->环境变量。分别配置 : path &nbs
Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 java spring
在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
LeetCode[位运算] - #136 数组中的单一数 Cwind java 题解位运算 LeetCode Algorithm
原题链接：#136 Single Number 要求：给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间难度：中等分析：题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
qq登陆界面开发 15700786134 qq
今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First { public void initul(){ jf=ne
Linux的程序包管理器RPM 被触发 linux
在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
socket通信遇到EOFException 肆无忌惮_ EOFException
java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
基于spring的web项目定时操作知了ing java Web
废话不多说，直接上代码，很简单配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
树形结构的数据库表Schema设计矮蛋蛋 schema
原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488 程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
maven将jar包和源码一起打包到本地仓库 alleni123 maven
http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
java IO操作与 File 获取文件或文件夹的大小，可读，等属性！！！百合不是茶
类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件：标准文件（txt doc mp3...）目录文件（文件夹）虚拟内存文件 2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
Spring注入有继承关系的类（2） bijian1013 java spring
被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
30岁转型期你能否成为成功人士 bijian1013 成长励志
很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
【Velocity四】Velocity与Java互操作 bit1129 velocity
Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础， POJO package com.tom.servlets; public
【Hive十一】Hive数据倾斜优化 bit1129 hive
什么是Hive数据倾斜问题操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。原因：key分布不均匀倾斜度衡量：平均记录数超过50w且
在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
java-3.求子数组的最大和 bylijinnan java
package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和题目描述：输入一个整形数组，数组里有正数也有负数。数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。求所有子数组的和的最大值。要求时间复杂度为O(n)。例如输入的数组为1, -2, 3, 10, -4,
Netty源码学习-FileRegion bylijinnan java netty
今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板 Zero Clipboard
Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
单例模式 cuishikuan 单例模式
第一种（懒汉，线程不安全）： public class Singleton { 2 private static Singleton instance; 3 pri
spring+websocket的使用 dalan_123
一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.or
细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL, -> day
Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。一、Activity跳转方法一Intent intent = new Intent(A.this, B.class); startActivity(intent) 方法二Intent intent = new Intent();intent.setCla
jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
Android 应用程序开关GPS gqdy365 android
要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
Windows上调试MapReduce zhiquanliu mapreduce
1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
如何看待一些知名博客推广软文的行为？ justjavac 博客
本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态：当初求种像条狗，如今撸完嫌人丑当初搜贴像条犬，如今读完嫌人软你为啥感觉不舒服呢？难道非得要作者把自己的劳动成果免费给你用，你才舒服？就如同 Google 关闭了 Gooled Reader，那是
sql优化总结 macroli sql
为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
Linux Oracle中常遇到的一些问题及命令总结超声波 oracle linux
1.linux更改主机名 (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名 2.linux重启oracle实例及监听的各种方法（注意操作的顺序应该是先监听，后数据库实例） &nbs
hive函数大全及使用示例 superlxw1234 hadoop hive函数
具体说明及示例参见附件文档。文档目录：目录一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class