CSS：动态边框

效果图：这里的外边框（红白相间）实际中会动的
代码：
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}
		
		#demo {
			width: 300px;
			padding: 10px;
			position: absolute;
			left: 200px;
			border: 1px solid;
		}
		
		#demo>img {
			display: block;
			position: relative;
			cursor: pointer;
		}
		
		.animation_border {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
		
		.animation_border {
			/*倾斜性背景*/
			background-image: -webkit-linear-gradient(45deg, red 25%, transparent 25%, transparent 50%, red 50%, red 75%, transparent);
			background-image: -moz-linear-gradient(45deg, red 25%, transparent 25%, transparent 50%, red 50%, red 75%, transparent);
			background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 50%, red 50%, red 75%, transparent 75%, transparent);
		}
		
		.animation_border {
			background-size: 30px 30px;
		}
		
		@-webkit-keyframes animate {
			/*定义动画webkit*/
			from {
				background-position: 0 0;
			}
			to {
				background-position: 60px 30px;
			}
		}
		
		@-moz-keyframes animate {
			/*定义动画opera*/
			from {
				background-position: 0 0;
			}
			to {
				background-position: 60px 30px;
			}
		}
		
		@keyframes animate {
			/*定义动画w3c*/
			from {
				background-position: 0 0;
			}
			to {
				background-position: 60px 30px;
			}
		}
		
		.animation_border {
			-webkit-animation: animate 0.5s linear infinite;
			-moz-animation: animate 0.5s linear infinite;
			animation: animate 0.5s linear infinite;
		}
	</style>

	<body>
		<div id="demo">
			<div class="animation_border"></div>
			<img src="../img/u=3885193650,3325372537&fm=27&gp=0.jpg" width="300" height="150" alt="" />
		</div>
	</body>

</html>
猜你喜欢
