获取用户IP地址并展示动画特效 - HTML代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>获取用户IP地址并展示动画特效 - HTML代码示例</title>
	<style>
		body {
			background-color: #f6f6f6;
			font-family: Arial, sans-serif;
		}
		#ip-address {
			font-size: 24px;
			font-weight: bold;
			margin-top: 50px;
			text-align: center;
		}
		#animation {
			width: 100%;
			height: 200px;
			position: relative;
			margin-top: 50px;
		}
		#animation .circle {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #007bff;
			position: absolute;
			top: 75px;
			animation-name: move;
			animation-duration: 2s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
		}
		@keyframes move {
			0% {
				left: 0;
			}
			50% {
				left: calc(100% - 50px);
			}
			100% {
				left: 0;
			}
		}
	</style>
</head>
<body>
	<div id='ip-address'>您的IP地址是：<?php echo $_SERVER['REMOTE_ADDR']; ?></div>
	<div id='animation'>
		<div class='circle'></div>
	</div>
</body>
</html>