<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 经典怀旧卡带播放器</title>
<style>
/* Icon font for player controls */
@font-face {
font-family: 'playericons';
src: url("./fonts/playericons.eot");
src: url("./fonts/playericons.eot?#iefix") format('embedded-opentype'), url("./fonts/playericons.woff") format('woff'), url("./fonts/playericons.ttf") format('truetype'), url("./fonts/playericons.svg#playericons") format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: Cambria, Georgia, serif;
background: #b6b6b6 url(./images/bg.jpg) fixed no-repeat top center;
font-weight: 400;
font-size: 15px;
color: #333;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: #2886bc;
text-decoration: none;
}
a:hover {
color: #000;
}
.container {
width: 100%;
position: relative;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.container > header {
margin: 10px 10px 0px 10px;
padding: 20px 10px 0px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-align: center;
}
.container > header h1 {
font-family: 'Aldrich';
font-size: 26px;
line-height: 26px;
margin: 0;
position: relative;
font-weight: 300;
color: #666;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.container > header h1 span {
font-weight: 700;
}
.container > header h2 {
width: 500px;
font-size: 14px;
line-height: 22px;
font-weight: 300;
margin: 0 auto;
padding: 15px 0 5px 0;
color: #666;
font-style: italic;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
}
.container > header h2 strong {
color: #781430;
}
.main {
width: 672px;
height: 480px;
padding: 30px 0;
margin: 0 auto;
position: relative;
overflow: hidden;
/* Header Style */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
z-index: 9999;
position: relative;
font-family: Cambria, Georgia, serif;
box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255, 255, 255, 0.3);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.attribution {
width: 600px;
margin: 0 auto;
text-align: center;
padding: 20px 10px 50px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
font-size: 10px;
font-family: 'Aldrich';
text-transform: uppercase;
font-weight: 300;
letter-spacing: 1px;
color: #666;
}
.support-note span {
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions {
display: block;
}
.vc-container {
text-align: center;
/* Tape elements */
height: 500px;
margin-bottom: 50px;
position: relative;
}
.vc-tape-wrapper {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.vc-tape {
width: 586px;
height: 379px;
margin: 30px auto 0;
position: relative;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.vc-loader {
position: absolute;
width: 31px;
height: 31px;
bottom: 50px;
left: 50%;
margin: -15px 0 0 -15px;
background: transparent url(./images/ajax-loader.gif) no-repeat center center;
display: none;
}
.vc-tape-back {
width: 100%;
height: 100%;
position: relative;
background: transparent url(./images/cs_back.png) no-repeat center center;
}
.vc-tape-wheel {
width: 125px;
height: 125px;
position: absolute;
top: 110px;
background: transparent;
border-radius: 50%;
}
.vc-tape-wheel-left {
left: 109px;
box-shadow: 0 0 0 70px #000;
}
.vc-tape-wheel-right {
right: 113px;
}
@-webkit-keyframes rotateLeft {
0% {
-webkit-transform: rotate(0deg) translateZ(-1px);
}
100% {
-webkit-transform: rotate(-360deg) translateZ(-1px);
}
}
@-webkit-keyframes rotateRight {
0% {
-webkit-transform: rotate(0deg) translateZ(-1px);
}
100% {
-webkit-transform: rotate(360deg) translateZ(-1px);
}
}
@-moz-keyframes rotateLeft {
0% {
-moz-transform: rotate(0deg) translateZ(-1px);
}
100% {
-moz-transform: rotate(-360deg) translateZ(-1px);
}
}
@-moz-keyframes rotateRight {
0% {
-moz-transform: rotate(0deg) translateZ(-1px);
}
100% {
-moz-transform: rotate(360deg) translateZ(-1px);
}
}
@-o-keyframes rotateLeft {
0% {
-o-transform: rotate(0deg) translateZ(-1px);
}
100% {
-o-transform: rotate(-360deg) translateZ(-1px);
}
}
@-o-keyframes rotateRight {
0% {
-o-transform: rotate(0deg) translateZ(-1px);
}
100% {
-o-transform: rotate(360deg) translateZ(-1px);
}
}
@-ms-keyframes rotateLeft {
0% {
-ms-transform: rotate(0deg) translateZ(-1px);
}
100% {
-ms-transform: rotate(-360deg) translateZ(-1px);
}
}
@-ms-keyframes rotateRight {
0% {
-ms-transform: rotate(0deg) translateZ(-1px);
}
100% {
-ms-transform: rotate(360deg) translateZ(-1px);
}
}
@keyframes rotateLeft {
0% {
transform: rotate(0deg) translateZ(-1px);
}
100% {
transform: rotate(-360deg) translateZ(-1px);
}
}
@keyframes rotateRight {
0% {
transform: rotate(0deg) translateZ(-1px);
}
100% {
transform: rotate(360deg) translateZ(-1px);
}
}
.vc-tape-wheel div {
width: 100%;
height: 100%;
background: transparent url(./images/cs_wheel.png) no-repeat center center;
}
.vc-tape-front {
width: 100%;
height: 100%;
position: absolute;
background: transparent url(./images/cs_front.png) no-repeat center center;
top: 0px;
left: 0px;
}
.vc-tape-side-b {
display: none;
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
}
.vc-tape-front span {
color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 83px;
left: 67px;
/* Controls list */
font-family: Arial;
font-weight: bold;
font-size: 20px;
}
ul.vc-controls {
list-style: none;
padding: 0;
width: 440px;
position: absolute;
bottom: 18px;
left: 50%;
margin: 0 0 0 -170px;
background: -moz-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 1
jQuery+HTML5实现经典怀旧的卡带音乐播放器功能源码.zip （21个子文件） 
132686851366582215 css 
knobKnob.css 912B images 
ajax-loader.gif 3KB
metal_dark.jpg 3KB knob.jpg 2KB bg.jpg 152KB
cs_front.png 40KB cs_back.png 9KB cs_wheel.png 8KB metal.jpg 3KB fonts playericons.eot 5KB playericons.ttf 5KB playericons.woff 3KB
playericons.svg 4KB
index.html 42KB js jquery-1.11.1.min.js 94KB knobKnob.jquery.js 3KB transform.js 13KB songs BlankKyt_RSPN.mp3 780KB BlankKytt_ThursdaySnowReprise.mp3 784KB BlankKyt_RSPN.ogg 457KB BlankKytt_ThursdaySnowReprise.ogg 788KB资源评论
毕业_设计
- 粉丝: 1992
- 资源: 1万+
最新资源
- 基于增量容量分析（ICA分析）和差分电压分析（DVA分析）的锂离子电池SOH和RUL预测 包括对原始数据的处理、滤波、绘制IC和DV曲线、提取特征、预测模型的构建
- 基于java的企业员工信息管理系统论文.doc
- 基于java的扫雷游戏的设计与实现论文.doc
- 毕业设计Jupyter Notebook基于深度网络的垃圾识别与分类算法研究项目源代码，用PyTorch框架中的transforms方法对数据进行预处理操作，后经过多次调参实验，对比不同模型分类效果
- 鸿蒙学习记录http网络请求
- 基于javaweb的沙发销售管理系统论文.doc
- 机器人运动学控制，simulink仿真模型，基于滑膜边结构控制，学习滑膜控制的不二法门，文件包含模型的说明和模型原理讲解
- 小红书2024新年市集合作方案解析与品牌营销策略
- 微藻检测18-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 基于LCL滤波器的单相光伏逆变器控制设计的MATLAB-Simulink仿真
- 用于Unity使用NuGet
- 2024年全球干式变压器行业规模及市场占有率分析报告
- 基于深度学习的视频描述综述：视觉与语言的桥梁
- NE555+74LS192+74LS48电子秒表课程设计报告(纯数电实现)
- 基于滑膜观测器和MTPA的内置式永磁同步电机无位置传感器模型
- 单相全桥逆变电路MATLAB仿真，原理图设计，单相全桥逆变器设计资料，ti的参考，可用做光伏并网逆变器，400V输入，220V输出 包括硬件ad原理图设计，pcb设计，设计指南，bom表等，资料齐全
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
