菜单 搜索
首页 前端知识 【HTML】简单制作一个唱片动画效果

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

2024-04-16 17:04:33 前端知识 前端哥 467 78 我要收藏

 目录

前言

开始       

HTML部分

CSS部分

效果图

总结

前言

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

 

开始       

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

d2ff443751024176b9d551595bee35be.png

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样式，创建一个视觉上吸引人的唱片播放器界面。每个组件都通过精心设计的类名和结构来模拟真实世界中的唱片播放器的外观和功能。

<!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，代码赋予了播放器动态的视觉特性，例如唱片旋转、音符跳动和名称标签旋转等效果。这些动画和样式的结合，使得整个播放器界面不仅外观逼真，而且具有动态的交互感。

: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); }
}

效果图

8686bdf1e6284de592d6e2bdba13a159.png

 

总结

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

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

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

 

 

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/5039.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

vue3绘制内容自动无缝滚动表格

2024-04-25 16:04:07

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue里使用样式color: var(--Editor-text)，已经定义了--Editor-text，但是却显示变量--Editor-text未定义，为啥

2024-04-25 08:04:19

wangEditor设置初始文字颜色

2024-04-23 15:04:38

Golang 使用 Gin 框架接收 HTTP Post 请求体中的 JSON 数据

2024-04-23 22:04:53

Python读写Json文件

2024-04-23 22:04:19

【头歌】——数据分析与实践-python-网络爬虫-Scrapy爬虫基础-网页数据解析-requests 爬虫-JSON基础

2024-04-23 22:04:19

ObjectMapper转化对象常用方法(转LIst、Map，以及Type、JavaType、constructType的学习)

2024-04-23 22:04:02

大家推荐的文章
1

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
2

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
3

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
10

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！