css3实现星星闪烁效果

最新推荐文章于 2024-05-29 17:25:33 发布

weixin_33933118

最新推荐文章于 2024-05-29 17:25:33 发布

阅读量3.1k

点赞数 2

文章标签： python

原文链接：https://my.oschina.net/u/3549294/blog/1816303

版权

2019独角兽企业重金招聘Python工程师标准>>>

素材：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		background: black;
	}

	.shine {
		background-image: url(./shine.png);
		background-repeat: no-repeat;
		background-position: center;
		width: 155px;
		height: 155px;
		position: absolute;
		animation: opacity-change 1s ease-in-out infinite;
		-webkit-animation: opacity-change 1s ease-in-out infinite;
		-moz-animation: opacity-change 1s ease-in-out infinite;
		-o-animation: opacity-change 1s ease-in-out infinite;
	}

	.shine2 {
		animation: opacity-change 1.75s ease-in-out infinite;
		-webkit-animation: opacity-change 1.75s ease-in-out infinite;
		-moz-animation: opacity-change 1.75s ease-in-out infinite;
		-o-animation: opacity-change 1.75s ease-in-out infinite;
	}

	@keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@-webkit-keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@-moz-keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@-o-keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

</style>

<body>
	<div class="shine shine2">
		<h2>闪烁的星星</h2>
	</div>
</body>

</html>

转载于:https://my.oschina.net/u/3549294/blog/1816303