div+css实现黑胶唱片机播放碟片音乐转动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现黑胶唱片机播放碟片音乐转动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
	--bs1: #4d4d4d;
	--bs2: #3d3d3d;
	--arm: #dedede;
	--bg2: #ffc000;
	--bg4: #00b91f;
	--bg1: #a27dc2;
	--bg3: #2a92bf;
}

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(fr.........完整代码请登录后点击上方下载按钮下载查看