用HTML和CSS绘制寒冬氛围的完美画面

12 min read

以下是一个简单的例子，使用html和css绘制冬天的感觉：

<!DOCTYPE html>
<html>
<head>
	<title>Winter Feeling</title>
	<style>
		body {
			background-color: #FFF;
		}
		
		.cold {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 200px;
			height: 200px;
			background-color: #0d47a1;
			border-radius: 50%;
			box-shadow: 0px 0px 20px #000;
		}

		.cold:before {
			content: "";
			position: absolute;
			top: 10%;
			left: 50%;
			transform: translate(-50%, -10%);
			width: 50px;
			height: 50px;
			background-color: #cfd8dc;
			border-radius: 50%;
			box-shadow: 0px 0px 10px #FFF;
		}

		.cold:after {
			content: "";
			position: absolute;
			top: 25%;
			left: 50%;
			transform: translate(-50%, -25%);
			width: 100px;
			height: 100px;
			background-color: #cfd8dc;
			border-radius: 50%;
			box-shadow: 0px 0px 10px #FFF;
		}

		.cold .icicle {
			position: absolute;
			top: 72%;
			left: 35%;
			width: 10px;
			height: 50px;
			background-color: #cfd8dc;
			border-radius: 5px 5px 0px 0px;
			transform: skew(-45deg);
			box-shadow: 0px 0px 10px #FFF;
			animation: fall 3s ease-in-out infinite;
		}

		.cold .icicle:nth-child(2) {
			left: 45%;
			transform: skew(45deg);
			box-shadow: 0px 0px 10px #FFF;
			animation: fall 2s ease-in-out infinite;
		}

		.cold .icicle:nth-child(3) {
			left: 55%;
			transform: skew(-45deg);
			box-shadow: 0px 0px 10px #FFF;
			animation: fall 4s ease-in-out infinite;
		}

		.cold .icicle:nth-child(4) {
			left: 65%;
			transform: skew(45deg);
			box-shadow: 0px 0px 10px #FFF;
			animation: fall 3.5s ease-in-out infinite;
		}

		@keyframes fall {
			0% {
				transform: translate(0, -100%);
			}
			
			100% {
				transform: translate(0, 100%);
			}
		}
	</style>
</head>
<body>
	<div class="cold"></div>
	<div class="cold">
		<div class="icicle"></div>
		<div class="icicle"></div>
		<div class="icicle"></div>
		<div class="icicle"></div>
	</div>
</body>
</html>

在这个例子中，我们绘制了一个代表冬天的圆形，并在圆形内放置了四个冰柱。圆形和冰柱都使用了CSS样式进行绘制。冰柱使用了CSS动画，让它们在页面上轻微移动。使用这些元素可以为网页带来冬天的气息。