【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的结合来创建一个视觉上吸引人且具有交互性的网页界面。通过精确的布局和丰富的视觉效果，这个唱片播放器模拟界面不仅在视觉上给人以深刻印象，而且还通过动画效果增强了用户的参与感和体验感。

相关推荐
guokanglun1 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan32 分钟前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记38 分钟前
前端：HTML （学习笔记）【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
风尚云网2 小时前
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解（一）
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析：快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能，觊觎（Edge）浏览器的内置截（长）图功能
前端·edge
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作