【HTML】简单制作一个唱片动画效果

雷神 Leo2024-04-06 1:01

目录

前言

开始

HTML部分

CSS部分

效果图

总结

前言

无需多言，本文将详细介绍一段代码，具体内容如下：

开始

首先新建文件夹，创建两个文本文档，其中HTML的文件名改为[index.html]，CSS的文件名改为[style.css]，创建好后右键用文本文档打开，再把下面相对应代码填入后保存即可。

HTML部分

下面HTML代码构建了一个模拟唱片播放器的网页布局。页面由多个div元素组成，每个div代表播放器的不同部分，如唱片、唱臂、转盘等。以下是各主要部分的简要描述：

  1. .content：这是页面的主要内容容器，包含了所有唱片播放器的组件。
  2. .music：包含六个span元素，模拟唱片上的音符或音乐波形。
  3. .legs：包含三个span元素，代表播放器的支架腿。
  4. .turntable：代表唱机的转盘部分。
  5. .disc：表示唱片本身。
  6. .vinyl：指代唱片上的黑色乙烯基材料。
  7. .name：用于显示唱片的名称或标签信息。
  8. .wheel：可能代表播放器的某个转动部件。
  9. .buttons：包含六个span元素，模拟播放器控制面板上的按钮。
  10. .group：包含唱臂和其他相关组件，如唱臂基座和唱头。
  11. .towers：包含两个span元素，代表播放器两侧的塔形结构。

整体上，这个网页布局旨在通过HTML元素和相应的CSS样式，创建一个视觉上吸引人的唱片播放器界面。每个组件都通过精心设计的类名和结构来模拟真实世界中的唱片播放器的外观和功能。

html 复制代码 
<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="en" >
<!-- 根元素，设置语言为英语 -->
<head>
  <meta charset="UTF-8">
  <!-- 设置字符编码为UTF-8，确保网页可以正确显示多语言内容 -->
  <title>唱片</title>
  <!-- 网页标题，显示在浏览器标签页上 -->
  <link rel="stylesheet" href="./style.css">
  <!-- 引入外部CSS文件，用于网页样式设计 -->
</head>
<body>

<div class="content">
  <!-- 包含所有唱片播放器元素的容器 -->
  <div class="music">
    <!-- 表示唱片上的音符或音乐波形的六个空span元素 -->
    <span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="legs">
    <!-- 表示唱片播放器支架的三个空span元素 -->
    <span></span><span></span><span></span>
  </div>
  <div class="turntable"></div>
  <!-- 表示唱机转盘的div元素 -->
  <div class="disc"></div>
  <!-- 表示唱片的div元素 -->
  <div class="vinyl"></div>
  <!-- 表示唱片上的黑色乙烯基材料的div元素 -->
  <div class="name"></div>
  <!-- 用于显示唱片名称或标签的div元素 -->
  <div class="wheel"></div>
  <!-- 表示唱片播放器的某个转动部件的div元素 -->
  <div class="buttons">
    <!-- 表示播放器控制面板上的按钮的六个空span元素 -->
    <span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="group">
    <!-- 包含唱臂和其他相关组件的div元素 -->
    <div class="circle"></div>
    <!-- 表示唱臂基座的圆形div元素 -->
    <div class="arm"></div>
    <!-- 表示唱臂的div元素 -->
    <div class="arm"></div>
    <!-- 另一个表示唱臂的div元素，可能用于创建重叠或立体效果 -->
    <div class="head"></div>
    <!-- 表示唱头的div元素 -->
  </div>
  <div class="towers">
    <!-- 表示唱片播放器两侧的塔形结构的div元素 -->
    <span></span><span></span>
  </div>
</div>
  
</body>
</html>

CSS部分

下面CSS代码用于创建一个视觉上复杂的唱片播放器界面，包括唱片、转盘、控制按钮、唱臂和唱头等组件。代码中定义了一系列颜色变量，用于整个界面的配色方案。每个组件都通过绝对定位精确放置，并使用了径向渐变、线性渐变、阴影等CSS技术来模拟真实世界中的外观和质感。

页面背景由多个径向渐变组成，营造出丰富的视觉效果。.content容器包含了所有播放器的组件，并使用Flexbox进行居中。每个组件，如.turntable、.legs、.wheel、.buttons、.towers、.group、.circle、.arm、.head、.disc、.vinyl和.name，都有其独特的样式和动画，使其在页面上栩栩如生。

此外，通过定义关键帧动画，如playing、naming、shining、music-notes和music-notes-dance，代码赋予了播放器动态的视觉特性，例如唱片旋转、音符跳动和名称标签旋转等效果。这些动画和样式的结合，使得整个播放器界面不仅外观逼真，而且具有动态的交互感。

css 复制代码 
:root {
  /* 定义一些基本的颜色变量，用于后续的样式设置 */
	--bs1: #4d4d4d;
	--bs2: #3d3d3d;
	--arm: #dedede;
	--bg2: #ffc000;
	--bg4: #00b91f;
	--bg1: #a27dc2;
	--bg3: #2a92bf;
}

body {
  /* 设置body的基本样式，包括宽度、高度、溢出隐藏以及居中显示内容 */	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
  /* 设置一个复杂的背景，使用径向渐变来模拟唱片播放器的背景 */
	background:
		radial-gradient(circle at 50% 50%, #fff0, #000c),
		radial-gradient(farthest-side at bottom left, var(--bg1), #fff0), 
		radial-gradient(farthest-side at top left, var(--bg2), #fff0), 
		radial-gradient(farthest-corner at bottom right, var(--bg3), #fff0), 
		radial-gradient(farthest-corner at top right, var(--bg4), #fff0);
}

.content {
  /* 设置唱片播放器内容容器的大小和位置 */
	width: 80vmin;
	height: 60vmin;
  /* 其他样式设置 */
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

  /* 设置内容容器内所有元素为绝对定位 */
.content * {
	position: absolute;
}

  /* 设置转盘的样式，包括大小、形状、阴影等 */
.turntable {
	width: 61%;
	height: 49.5%;
	background: var(--bs1);
	transform: rotate(-30deg) skewX(30deg);
	margin-top: 4%;
	border-radius: 5%;
	box-shadow: 
		-0.5vmin 0.5vmin 0 0 var(--bs2), 
		-1vmin 0.9vmin 0 0 var(--bs2), 
		-1.5vmin 1.35vmin 0 0 var(--bs2), 
		-2vmin 1.8vmin 0 0 var(--bs2), 
		-4.75vmin 4vmin 0.25vmin 0 #0004;
}

.turntable:before {
	content: "";
	background: var(--bs2);
	width: 17%;
	height: 24%;
	position: absolute;
	left: 78%;
	top: 4%;
	border-radius: 100%;
	box-shadow: -0.1vmin 0.1vmin 0.25vmin 0 #000 inset;
}

  /* 设置播放器支架腿的样式 */
.legs {
	width: 100%;
	height: 100%;
}

.legs span {
	top: 64.5%;
	left: 8.25%;
	background: linear-gradient(90deg, #242423 35%, #333333 35%);
	width: 6.5%;
	height: 4%;
	border-radius: 0 0 100% 100%;
}

.legs span + span {
	top: 87.75%;
	left: 39.25%;
}

.legs span + span + span {
	top: 52.35%;
	left: 85.25%;
}

  /* 设置旋钮的样式 */
.wheel {
	background: linear-gradient(90deg, #242423 35%, #333333 35%);
	width: 6.5%;
	height: 4%;
	border-radius: 0 0 100% 100%;
	top: 77.75%;
	left: 39%;
}

.wheel:before {
	content: "";
	background: var(--bs2);
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 100%;
	top: -50%;
}

  /* 设置控制按钮的样式 */
.buttons {
	background: #ffffff00;
	width: 25%;
	height: 21%;
	left: 63%;
	top: 30%;
}

.buttons span {
	top: 8%;
	left: 3.5%;
	background: linear-gradient(90deg, #242423 35%, #333333 35%);
	width: 9%;
	height: 9%;
	border-radius: 0 0 100% 100%;
}

.buttons span:before {
	content: "";
	background: var(--bs2);
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 100%;
	top: -50%;
}

.buttons span + span {
	top: 23%;
	left: 19%;
}

.buttons span + span + span {
	top: 42%;
	left: 36%;
	width: 15%;
}

.buttons span + span + span + span {
	top: 60%;
	left: 56%;
}

.buttons span + span + span + span + span {
	--bs2: #999;
	top: 81%;
	left: 75%;
	width: 20%;
	height: 12%;
}

.buttons span:after {
	content: "TREBLE";
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 100%;
	transform: rotateY(-5deg) rotateX(-50deg) rotateZ(-39deg);
	font-size: 0.75vmin;
	top: 105%;
	left: 50%;
	font-family: Arial, Helvetica, serif;
}

.buttons span + span:after {
	content: "BASS";
	left: 80%;
	top: 80%;
}

.buttons span + span + span:after {
	content: "FFW";
	top: 60%;
	left: 75%;
}

.buttons span + span + span + span:after {
	content: "RW";
	left: 85%;
	top: 55%;
}

.buttons span + span + span + span + span:after {
	content: "PLAY/PAUSE";
	left: 50%;
	top: 90%;
	color: var(--bs2)
}

  /* 设置塔形结构的样式 */
.towers {
	width: 9%;
	height: 9%;
	margin-top: -38%;
	margin-left: 13.5%;
	background: linear-gradient(180deg, #fff0 0 1.95vmin, var(--bs1) 0 2.3vmin, var(--bs2) 0 2.5vmin, #fff0 0 100%);
	background-repeat: no-repeat;
	background-size: 80% 100%;
	background-position: 50% 0;
}

.towers span {
	background: 
		radial-gradient(circle at 50% -15%, #fff0 33%, #333 calc(33% + 1px) 75%, #fff0 0  100%), 
		radial-gradient(circle at 50% 73%, #333 0 33%, #fff0 calc(33% + 1px) 100%);
	width: 30%;
	height: 95%;
	left: 2%;
	bottom: 2%;
	filter: drop-shadow(-2px -2px 1px #0006);
}

.towers span:before {
	content: "";
	position: absolute;
	width: 98%;
	height: 30%;
	background: var(--bs2);
	border-radius: 100%;
}

.towers span:after {
	content: "";
	position: absolute;
	width: 33%;
	height: 80%;
	background: #242424;
	z-index: -1;
	bottom: 2%;
	border-radius: 0 0 0.05vmin 1vmin;
}

.towers span + span {
	left: 66%;
}

@keyframes playing {
	50% { transform: rotate(0.35deg);}   
}

  /* 设置唱臂和唱头的样式，包括动画使其看起来像在旋转 */
.group {
	width: 8%;
	height: 38%;
	margin-top: -25%;
	margin-left: 13.5%;
	transform-origin: 50% 20%;
	transform: rotate(0deg);
	transition: all 0.5s ease 0s;
	filter: drop-shadow(-3px 8px 4px #0006);
	animation: playing 0.5s ease 0s infinite;
}

  /* 设置唱臂基座的样式 */
.circle {
	width: 94%;
	height: 25%;
	background: 
		radial-gradient(circle at 49% 61%, var(--bs2) 0 19%, #fff0 calc(20% + 1px) 100%), 
		radial-gradient(circle at 50% 87%, #fff 0 65%, #999999 calc(65% + 1px) 100%);
	top: 3%;
	left: 3%;
	border-radius: 90% 90% 100% 100%;
}

.circle:before {
	content: "";
	position: absolute;
	background: radial-gradient(circle at 50% 900%, #fff0 0 90%, var(--bs2) calc(90% + 1px) 100%);
	width: 27%;
	height: 9%;
	border-radius: 5vmin 5vmin 0 0;
	left: 35%;
	margin-top: -4%;
}

  /* 设置唱臂的样式 */
.arm {
	width: 3vmin;
	height: 8vmin;
	left: 42%;
	top: 17%;
	border-radius: 5% 5% 0% 100%;
	border: 0.9vmin solid #ff000000;
	border-left-color: var(--arm);
	border-top-width: 0;
	border-bottom-color: var(--arm);
	border-right-width: 0;
}

.arm + .arm {
	transform: rotateY(180deg) rotateX(180deg);
	transform-origin: calc(100% - 1px) calc(100% - 0.35vmin);
}

.arm:before {
	content: "";
	position: absolute;
	background: radial-gradient(circle at 50% 83%, #fff0 0 0.5vmin, var(--bs2) calc(0.5vmin + 1px) 100%);
	width: 1.25vmin;
	height: 1vmin;
	left: -1vmin;
	top: -0.2vmin;
}

.arm + .arm:before  {
	display: none;
}

  /* 设置唱头的样式 */
.head {
	background: 
		repeating-conic-gradient(from 0deg at 80% 20%, var(--arm) 0 25%, #fff0 0 100%), 
		repeating-conic-gradient(from 0deg at 60% 20%, var(--arm) 0 25%, #fff0 0 100%);
	width: 32%;
	height: 15%;
	bottom: -1%;
	left: 8.7vmin;
	border-radius: 0.25vmin;
	background-size: 2vmin 1.15vmin, 0.85vmin 1.25vmin;
	background-position: 3.2vmin 5vmin, 0.75vmin 1vmin;
	background-color: var(--bs2);
}

.head:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 0.25vmin;
	background: var(--bs2);
	top: 0.5vmin;
	right: calc(-100% - 1px);
	border-bottom: 0.3vmin solid #6b6b6b;
	border-right: 0.2vmin solid #6b6b6b;
	border-radius: 0 0.15vmin 0.2vmin 0;
}

.head:after {
	content: "";
	position: absolute;
	background: 
		linear-gradient(180deg, #fff0 0 0.01vmin, var(--bs1) 0 0.3vmin, #fff0 0 100%), 
		linear-gradient(0deg, #fff0 0 0.01vmin, var(--bs1) 0 0.3vmin, #fff0 0 100%), 
		linear-gradient(70deg, #fff0 0 0.15vmin, var(--bs1) 0 0.45vmin, #fff0 0 100%), 
		linear-gradient(-70deg, #fff0 0 0.15vmin, var(--bs1) 0 0.45vmin, #fff0 0 100%), 
		conic-gradient(from -20deg at 50% 350%, #000 0 40deg, #fff0 0 100%);
	width: 99%;
	height: 25%;
	bottom: -20%;
	left: 0%;
	border-radius: 0.05vmin 0.05vmin 0.5vmin 0.5vmin;
	transform-origin: 50% 0;
	transform: rotateX(45deg);
}

  /* 设置唱片的样式 */
.disc {
	background: linear-gradient(-80deg, #747474 24%, #818181 25%);
	width: 39vmin;
	height: 45.5vmin;
	border-radius: 100%;
	transform: rotateX(59deg) rotateY(0deg);
	left: 16.25vmin;
	top: 10vmin;
	border: 0.5vmin solid var(--bs2);
	border-top-width: 0;
}

  /* 设置黑胶唱片的样式 */
.vinyl {
	background: 
		radial-gradient(circle at 50% 50%, #f6b31a 5vmin, #e58c00 5.5vmin, #ffb100 5.85vmin, #fff0 calc(6vmin + 1px) 100%), 
		repeating-radial-gradient(#222 0 0.1vmin, #111 calc(0.1vmin + 3px) 0.3vmin, #fff0 0 calc(0.3vmin + 1px));
	width: 36vmin;
	height: 41vmin;
	border-radius: 100%;
	transform: rotateX(59deg) rotateY(0deg);
	left: 18vmin;
	top: 11vmin;
	border: 0.25vmin solid #0c0c0c;
}

.vinyl:before {
	content: "";
	left: 17.4vmin;
	background: var(--bs1);
	width: 1.2vmin;
	height: 1.5vmin;
	position: absolute;
	border-radius: 100%;
	top: 18.35vmin;
	z-index: 2;
}

.vinyl:after {
	content: "";
	position: absolute;
	top: calc(50% - 1.25vmin);
	left: calc(50% - 0.65vmin);
	background: linear-gradient(90deg, #242423 35%, #333333 35%);
	width: 1.25vmin;
	height: 1.5vmin;
	border-radius: 0 0 100% 100%;
}

  /* 设置唱片名称的样式，包括动画使其旋转 */
.name:before, .name:after {
	content: "DEEP PURPLE \A \2234 \2235 \2234 \2235 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \25a6 \2592 \25a6 \A MADE IN JAPAN";
	background: #f000;
	width: 8vmin;
	height: 12vmin;
	position: absolute;
	text-align: center;
	font-family: Arial, Helvetica, serif;
	font-size: 0.7vmin;
	font-weight: bold;
	transform: rotateX(60deg) rotate(0deg);
	left: -8vmin;
	top: -4.5vmin;
	line-height: 3vmin;
	animation: naming 3s linear 0s infinite;
	white-space: pre-wrap;
	padding-top: 0vmin;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes naming {
	100% { transform: rotateX(60deg) rotate(360deg); }    
}

.name:after {
	content: "";
	background: repeating-conic-gradient(#fff0 0 15%, #fff2 30%, #fff0 45%), radial-gradient(#fff0 1vmin, #000c);
	width: 36vmin;
	height: 36vmin;
	left: -21.75vmin;
	top: -16.15vmin;
	border-radius: 100%;
	transform: rotateX(60deg) rotate(0deg);
	filter: blur(1vmin);
	animation: shining 1s ease 0s infinite;
}

/* 动画使.name后面的光晕旋转并轻微偏移 */
@keyframes shining {
	50% { transform: rotateX(60deg) rotate(3deg); }    
}

  /* 设置音乐符号的样式，包括动画使其跳动 */
.music {
	width: 25vmin;
	height: 19vmin;
	background: #f000;
	position: absolute;
	z-index: 3;
	left: 25vmin;
	top: 0;
	overflow: hidden;
	transform: scale(1.75);
}

.music span:before {
	content: "\266A";
	filter: contrast(5);
	font-size: 3vmin;
}

.music span {
	bottom: 0;
	right: 3vmin;
	color: #0087ff;
	animation: 
		music-notes 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite,
		music-notes-dance 1s ease-in-out 0s infinite alternate;
	;

}


.music span:nth-child(2):before,
.music span:nth-child(5):before{
	content: "\266B";
}

.music span:nth-child(3):before,
.music span:nth-child(6):before {
	content: "\266C";
}


.music span:nth-child(2) {
	right: 6vmin;
	animation-delay: -1.66s;
}
.music span:nth-child(3) {
	right: 9vmin;
	animation-delay: -8.33s;
}
.music span:nth-child(4) {
	right: 13vmin;
	animation-delay: -5s;
}
.music span:nth-child(5) {
	right: 16vmin;
	animation-delay: -3.33s;
}
.music span:nth-child(6) {
	right: 19vmin;
	animation-delay: -6.66s;
}

/* 动画使.music中的音符上升并消失 */
@keyframes music-notes {
	0% { bottom: 0; opacity: 0; filter: hue-rotate(0deg) brightness(0); }
	20% { filter: hue-rotate(0deg) brightness(0); }
	50% {opacity: 1; }
	100% { bottom: 80%; opacity:0; filter: hue-rotate(330deg) brightness(2); }
}

/* 动画使.music中的音符左右摇摆 */
@keyframes music-notes-dance {
	0% { transform: translateX(-1vmin); }
	100% { transform: translateX(-3vmin); }
}

效果图

总结

这段HTML和CSS代码共同构建了一个模拟唱片播放器的网页界面。HTML部分定义了播放器的各个组件，包括唱片、转盘、控制按钮、唱臂和唱头等，而CSS部分则为这些组件添加了详细的样式和动画效果，使其具有逼真的外观和动态的交互体验。

HTML结构中，.content容器包含了所有子组件，每个组件通过类名进行标识，并使用绝对定位来精确放置。CSS代码中定义了一系列颜色变量和复杂的背景渐变，以及对每个组件的尺寸、形状和阴影的详细设置。此外，CSS还包括了多个关键帧动画，如唱片旋转、音符跳动和名称标签旋转等，这些动画通过@keyframes规则定义，并应用于相应的HTML元素，以实现动态效果。

整体而言，这段代码展示了如何通过HTML和CSS的结合来创建一个视觉上吸引人且具有交互性的网页界面。通过精确的布局和丰富的视觉效果，这个唱片播放器模拟界面不仅在视觉上给人以深刻印象，而且还通过动画效果增强了用户的参与感和体验感。

相关推荐
web147862107238 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247809 分钟前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖13 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案120 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548825 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.36 分钟前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营41 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play