用css的动画制作——西游记人物运动起来

最新推荐文章于 2024-07-13 02:11:53 发布

Sky-木落

最新推荐文章于 2024-07-13 02:11:53 发布

阅读量657

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43518425/article/details/119329036

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1、效果图

在这里插入图片描述

2、部分源代码

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<!-- <link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/a-cat/custom.css?v=9bZGlGHQBwod7ANb++Ag1WzrOc0="> -->
		<style type="text/css">
			body {
				padding-bottom: 200px;
			}

			.wukong {
				position: fixed;
				right: 0;
				bottom: 200px;
				z-index: 999999;
				animation: mymove 5s infinite ease-in-out;
			}

			@keyframes mymove {
				0% {
					bottom: 200px;
				}

				50% {
					bottom: 250px;
				}

				100% {
					bottom: 200px;
				}
			}

			.message {
				padding: 5px 20px;
				color: #000;
				font-size: 15px;
				position: absolute;
				top: -50px;
				right: 50px;
				background-color: #f3e100;
				white-space: nowrap;
			}

			.message:before {
				content: '';
				position: absolute;
				right: 10px;
				top: 100%;
				margin-left: 10px;
				float: left;
				width: 0;
				height: 0;
				border-width: 8px;
				border-style: solid;
				border-color: #f3e100 transparent transparent transparent;
			}

			.wukong .wukong-img {
				width: 150px;
				height: 150px;
				overflow: hidden;
			}

			.wukong-img img {
				width: 150px;
				height: 150px;
			}





			/**bg**/
			.tangseng {
				position: absolute;
				top: 40px;
				right: 290px;
				background: url(https://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_tangseng.png) 0 0 no-repeat;
				z-index: 999999;
				width: 170px;
				height: 240px;
				animation: tszou 1s steps(8) infinite;
				-webkit-animation: tszou 1s steps(8) infinite;
				-moz-animation: tszou 1s steps(8) infinite;
				-o-animation: tszou 1s steps(8) infinite;
			}

			@keyframes tszou {
				to {
					background-position: -1360px 0;
				}
			}

			@-webkit-keyframes tszou {
				to {
					background-position: -1360px 0;
				}
			}

			@-moz-keyframes tszou {
				to {
					background-position: -1360px 0;
				}
			}

			@-o-keyframes tszou {
				to {
					background-position: -1360px 0;
				}
			}

			.bajie {
				position: absolute;
				top: 72px;
				right: 388px;
				background: url(https://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_bajie.png) 0 0 no-repeat;
				z-index: 999999;
				width: 200px;
				height: 180px;
				animation: bjzou 1s steps(8) infinite;
				-webkit-animation: bjzou 1s steps(8) infinite;
				-moz-animation: bjzou 1s steps(8) infinite;
				-o-animation: bjzou 1s steps(8) infinite;
			}

			@keyframes bjzou {
				to {
					background-position: -1600px 0;
				}
			}

			@-webkit-keyframes bjzou {
				to {
					background-position: -1600px 0;
				}
			}

			@-moz-keyframes bjzou {
				to {
					background-position: -1600px 0;
				}
			}

			@-o-keyframes bjzou {
				to {
					background-position: -1600px 0;
				}
			}

			.shaseng {
				position: absolute;
				top: 72px;
				right: 116px;
				background: url(https://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_shaseng.png) 0 0 no-repeat;
				z-index: 999999;
				width: 210px;
				height: 200px;
				animation: sszou 1s steps(8) infinite;
				-webkit-animation: sszou 1s steps(8) infinite;
				-moz-animation: sszou 1s steps(8) infinite;
				-o-animation: sszou 1s steps(8) infinite;
			}

			@keyframes sszou {
				to {
					background-position: -1680px 0;
				}
			}

			@-webkit-keyframes sszou {
				to {
					background-position: -1680px 0;
				}
			}

			@-moz-keyframes sszou {
				to {
					background-position: -1680px 0;
				}
			}

			@-o-keyframes sszou {
				to {
					background-position: -1680px 0;
				}
			}
		</style>
	</head>
	<body style="background-color: rgb(70, 156, 206);">
		<!-- style="background-color: rgb(70, 156, 206);" -->
		<div id="page_end_html">
			<div class="wukong">
				<div class="message">一日不书，百事荒芜。</div>
				<div class="wukong-img">
					<img src="img/o_wukong.png">
				</div>
			</div>
			<div class="bajie"></div>
			<div class="tangseng"></div>
			<div class="shaseng"></div>
		</div>
	</body>
</html>