CSS——动画和弹性盒子（旋转相册，城市动画，WC3导航条，骰子（附源码））

本文链接：https://blog.youkuaiyun.com/m0_72975897/article/details/126771310

本文通过两个实例——旋转相册和城市动画，介绍了HTML/CSS在创建动态效果方面的应用。在旋转相册中，利用transform属性实现了3D旋转效果，而在城市动画中，结合背景变化、弹性盒子和图片定位，营造出逼真的场景动画。这些实操练习有助于巩固和提升对HTML/CSS动画及布局的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天，我简单的介绍了一下过渡和动画，这些主要是对一些属性的理解和运用，今天我们就来练练，实操检验成果，一起来看看吧！

前言

今天都是一些实操练习，有什么不清楚的可以发私信给我呀~内附源码，

一、旋转相册

1.运行效果

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>照片墙</title>
		<style>
			body {
				margin: 0px;
			}

			#div {
				background-image: url(w3.jpeg);
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				min-width: 1000px;
				z-index: -10;
				zoom: 1;
				background-color: #fff;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center 0;

			}

			#photo_box {
				width: 280px;
				height: 400px;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: 200px auto;
				transform-style: preserve-3d;
				transform: rotateX(-5deg) rotateY(0deg);
				animation: run 30s linear infinite;
			}

			#photo_box img {
				width: 250px;
				height: 350px;
				border: 5px solid #ccc;
				border-radius: 5px;
				position: absolute;
				left: 0;
				top: 0;
			}

			#photo_box img:nth-child(1) {
				transform: rotateY(0deg) translateZ(500px);
			}

			#photo_box img:nth-child(2) {
				transform: rotateY(60deg) translateZ(500px);
			}

			#photo_box img:nth-child(3) {
				transform: rotateY(120deg) translateZ(500px);
			}

			#photo_box img:nth-child(4) {
				transform: rotateY(180deg) translateZ(500px);
			}

			#photo_box img:nth-child(5) {
				transform: rotateY(240deg) translateZ(500px);
			}

			#photo_box img:nth-child(6) {