- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- border: 0;
- }
- *, *:before, *:after {
- box-sizing: border-box;
- box-sizing: border-box;
- }
- .cassette-wrap {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- border: 3px solid #000;
- border-radius: 14px;
- padding: 3px 10px;
- width: 495px;
- height: 316px;
- background: #222831;
- margin: auto;
- }
- .screw {
- position: absolute;
- display: inline-block;
- width: 14px;
- height: 14px;
- background: #;
- border-radius: 50%;
- border: 1px solid white;
- }
- .screw:before, .screw:after {
- content: '';
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 7px;
- height: 1px;
- margin: auto;
- background: white;
- }
- .screw:after {
- transform: rotate(90deg);
- transform: rotate(90deg);
- }
- .screw:nth-child(1), .screw:nth-child(2) {
- top: 4px
- }
- .screw:nth-child(3), .screw:nth-child(4) {
- bottom: 6px
- }
- .screw:nth-child(1), .screw:nth-child(3) {
- left: 7px
- }
- .screw:nth-child(2), .screw:nth-child(4) {
- right: 7px
- }
- .screw:nth-child(5) {
- top: 18px;
- right: 156px;
- }
- .cassette-locker {
- position: absolute;
- width: 28px;
- height: 15px;
- border: 2px solid #808080;
- }
- .cassette-locker.L {
- left: 32px
- }
- .cassette-locker.R {
- right: 34px;
- }
- .filament-stiffner {
- position: absolute;
- bottom: 10px;
- width: 29px;
- height: 29px;
- border-radius: 50%;
- border: 1px solid #7b7b7b;
- }
- .filament-stiffner:before {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background: #fff;
- }
- .filament-stiffner.L {
- left: 31px
- }
- .filament-stiffner.R {
- right: 33px
- }
- .filament-process-wrap {
- width: 324px;
- height: 74px;
- margin: auto;
- position: absolute;
- bottom: 0px;
- left: 0;
- right: 0;
- z-index: 4;
- }
- .filament-process-wrap:before {
- content: '';
- position: absolute;
- box-shadow: 0 -4px 0 4px #7b7b7b;
- width: 100%;
- height: 100%;
- transform: perspective(250px) rotateX(20deg);
- }
- .square-filament-stiffner {
- position: absolute;
- top: 48px;
- width: 15px;
- height: 15px;
- border: 2px solid #7b7b7b;
- background: white;
- border-radius: 5px;
- }
- .square-filament-stiffner.L {
- left: 90px;
- }
- .square-filament-stiffner.R {
- right: 80px;
- }
- .circle-filament-stiffner {
- position: absolute;
- top: 55px;
- width: 15px;
- height: 15px;
- border: 2px solid #7b7b7b;
- background: white;
- border-radius: 50%;
- }
- .circle-filament-stiffner.L {
- left: 42px;
- }
- .circle-filament-stiffner.R {
- right: 32px;
- }
- .filament-reader-area {
- position: absolute;
- width: 90px;
- height: 23px;
- box-shadow: 0 -6px 0 2px #7b7b7b;
- background: transparent;
- bottom: -4px;
- left: 8px;
- right: 0;
- margin: auto;
- }
- .filaments-container {
- position: absolute;
- top: 64px;
- left: 0;
- right: 0;
- bottom: 0;
- margin: 0 auto;
- border: 2px solid #505050;
- border-top: 0;
- border-bottom: 0;
- width: 472px;
- height: 132px;
- z-index: 3;
- }
- .filaments-container:before {
- content: '';
- position: absolute;
- top: -63px;
- left: 59px;
- border: 3px solid #505050;
- border-bottom: 0;
- width: 350px;
- height: 58px;
- transform: perspective(50px) rotateX(27deg);
- }
- .circular-container {
- position: absolute;
- top: 80px;
- width: 236px;
- height: 138px;
- z-index: -1;
- overflow: hidden;
- background: none;
- }
- .circular-container:before {
- content: '';
- position: absolute;
- width: 282px;
- height: 140px;
- top: -3.9px;
- background: none;
- box-shadow: 0 0 0 2px #505050;
- border-radius: 0 0 265px 265px;
- }
- .circular-container.L {
- left: -2px;
- }
- .circular-container.L:before {
- left: -9.6px;
- }
- .circular-container.R {
- right: -2px;
- }
- .circular-container.R:before {
- right: -9.7px;
- }
- .cassette-cover-sticker {
- position: absolute;
- top: -15px;
- left: 0px;
- right: 0;
- margin: auto;
- width: 445px;
- height: 180px;
- background: #FDE9C9;
- z-index: 94;
- }
- .cassette-cover-sticker:before {
- content: '';
- position: absolute;
- top: -35px;
- left: 0;
- right: 0;
- margin: auto;
- width: 420px;
- height: 47px;
- background: #FDE9C9;
- transform: perspective(350px) rotateX(60deg);
- z-index: 6;
- }
- .cassette-cover-sticker:after {
- content: '';
- position: absolute;
- bottom: 0px;
- left: 0px;
- right: 0;
- margin: auto;
- width: 445px;
- height: 20px;
- background: #FDE9C9;
- box-shadow: 0 -157px 0 0 #FDE9C9;
- z-index: 2;
- }
- .cassette-name {
- font-family: Arial, sans-serif;
- text-align: center;
- padding: 6px 0 3px;
- position: relative;
- z-index: 6;
- color: #222831;
- margin: -23px 26px;
- background: #FDE9C9;
- }
- .cassette-name:before, .cassette-name:after {
- content: '';
- position: absolute;
- top: 5px;
- width: 12px;
- height: 1px;
- box-shadow: 20px 0 0 0 #2D4059, 43px 0 0 0 #2D4059, 0px 17px 0 0 #2D4059, 20px 17px 0 0 #2D4059, 43px 17px 0 0 #2D4059, 0px 35px 0 0 #2D4059, 20px 35px 0 0 #2D4059, 43px 35px 0 0 #2D4059;
- background: #2D4059;
- }
- .cassette-name:before {
- left: 15px;
- }
- .cassette-name:after {
- right: 60px;
- }
- .tape-level-wrap {
- position: absolute;
- width: 100%;
- top: 23px;
- left: 0;
- height: 137px;
- z-index: 2;
- }
- .tape-level-wrap:before {
- content: '';
- position: absolute;
- width: 158px;
- height: 35px;
- box-shadow: 158px 0 0 0 #2D4059, 287px 0 0 0 #2D4059, 287px 34px 0 0 #2D4059, 287px 68px 0 0 #2D4059, 287px 102px 0 0 #2D4059, 129px 102px 0 0 #2D4059, 0px 102px 0 0 #2D4059, 0px 68px 0 0 #2D4059, 0px 34px 0 0 #2D4059;
- z-index: 5;
- background: #2D4059;
- }
- .tape-level-wrap:after {
- content: '';
- position: absolute;
- top: 22px;
- left: 47px;
- width: 111px;
- height: 13px;
- box-shadow: 110px 0 0 0 #EA5455, 220px 0 0 0 #EA5455, 240px 0 0 0 #EA5455, 0 80px 0 0 #EA5455, 110px 80px 0 0 #EA5455, 220px 80px 0 0 #EA5455, 240px 80px 0 0 #EA5455, 0 10px 0 0 #EA5455, 240px 10px 0 0 #EA5455, 0px 22px 0 0 #EA5455, 240px 22px 0 0 #EA5455, 0px 34px 0 0 #EA5455, 240px 34px 0 0 #EA5455, 0px 46px 0 0 #EA5455, 240px 46px 0 0 #EA5455, 0px 58px 0 0 #EA5455, 240px 58px 0 0 #EA5455, 0px 70px 0 0 #EA5455, 240px 70px 0 0 #EA5455;
- z-index: 5;
- background: #EA5455;
- }
- .filament {
- position: absolute;
- border-radius: 50%;
- background: black;
- }
- .filament.L {
- width: 120px;
- height: 120px;
- left: 57px;
- top: 10px;
- }
- .filament.L:before {
- width: 110px;
- top: 11px;
- left: -9px;
- }
- .filament.R {
- width: 250px;
- height: 250px;
- right: -9px;
- top: -55px;
- }
- .filament.R:before {
- width: 110px;
- top: 77px;
- left: 85px;
- }
- .filament .hub {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 57px;
- height: 57px;
- background: #222831;
- box-shadow: 0 0 0 2px white, 0 0 0 3px #222831, 0 0 0 4px white;
- border-radius: 50%;
- z-index: 6;
- animation: recordStart 10s linear infinite 0.4s;
- }
- .filament.L .hub {
- animation-delay: 1s;
- }
- .hub .hub-lock {
- display: inline-block;
- width: 8px;
- height: 8px;
- background: white;
- position: absolute;
- z-index: 0;
- }
- .hub .hub-lock:nth-child(1) {
- left: 0;
- right: 0;
- margin: auto;
- }
- .hub .hub-lock:nth-child(2) {
- transform: translate(45px, 12px) rotate(60deg);
- }
- .hub .hub-lock:nth-child(3) {
- transform: translate(45px, 35px) rotate(120deg);
- }
- .hub .hub-lock:nth-child(4) {
- left: 0;
- right: 0;
- margin: auto;
- bottom: 0;
- }
- .hub .hub-lock:nth-child(5) {
- transform: translate(3px, 36px) rotate(240deg);
- }
- .hub .hub-lock:nth-child(6) {
- transform: translate(3px, 13px) rotate(300deg)
- }
- @keyframes recordStart {
- 100% {
- transform: rotate(360deg);
- }
- }
- #audio-control {
- position: fixed;
- bottom: 30px;
- right: 30px;
- width: 60px;
- height: 60px;
- background: #ea5468;
- border-radius: 50%;
- cursor: pointer;
- }
- #audio-control:hover {
- box-shadow: -1px 1px 4px 0 #bda5a5;
- }
- #audio-control span.bar {
- display: inline-block;
- position: absolute;
- left: 22px;
- bottom: 18px;
- width: 2px;
- height: 5px;
- background: #fff;
- transition: all 0.25s ease-in;
- animation: barMotion 0.3s ease-out infinite;
- }
- #audio-control span.bar:nth-child(2) {
- left: 28px;
- animation-direction: reverse;
- }
- #audio-control span.bar:nth-child(3) {
- left: 34px;
- animation-direction: alternate-reverse;
- }
- #audio-control.noVolume span.bar {
- bottom: 0;
- top: 0;
- margin: auto;
- animation: none;
- }
- #backgroundaudio {
- display: block;
- position: fixed;
- bottom: -43px;
- left: 5px;
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -ms-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- }
- #backgroundaudio:hover {
- bottom: 0;
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -ms-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- }
- #backgroundaudio audio {
- background: #ffffff;
- padding: 5px;
- display: table-cell;
- vertical-align: middle;
- height: 43px;
- z-index: 9998;
- }
- #backgroundaudio i {
- font-size: 40px;
- display: block;
- background: #ffffff;
- padding: 5px;
- width: 50px;
- float: none;
- margin-bottom: -1px;
- z-index: 9999;
- }
- @keyframes barMotion {
- 100% {
- height: 25px;
- }
- }
- </style>
- </head>
- <body>
- <div class="cassette-wrap">
- <span class="screw"></span>
- <span class="screw"></span>
- <span class="screw"></span>
- <span class="screw"></span>
- <div class="cassette-locker L"></div>
- <div class="cassette-locker R"></div>
- <div class="filament-stiffner L"></div>
- <div class="filament-stiffner R"></div>
- <div class="filament-process-wrap">
- <span class="square-filament-stiffner L"></span>
- <span class="square-filament-stiffner R"></span>
- <span class="circle-filament-stiffner L"></span>
- <span class="circle-filament-stiffner R"></span>
- <span class="screw"></span>
- <div class="filament-reader-area"></div>
- </div>
- <div class="filaments-container">
- <div class="circular-container L"></div>
- <div class="circular-container R"></div>
- <div class="cassette-cover-sticker">
- <h1 class="cassette-name">STAR LORD</h1>
- <div class="tape-level-wrap">
- <div class="filament L">
- <div class="hub">
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- </div>
- </div>
- <div class="filament R">
- <div class="hub">
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- <span class="hub-lock"></span>
- </div>
- </div>
- </div>
- </div>
- <div class="filament-thin-wrap"></div>
- </div>
- </div>
- <div id="audio-control">
- <span class="bar"></span>
- <span class="bar"></span>
- <span class="bar"></span>
- </div>
- <div id="backgroundaudio">
- <i class="icon-volume-up"></i>
- <audio autoplay=""controls="" loop=""preload="" id="audio">
- <source src="http:///madrasters.com/activity/cassette/soundtrack.mp3" type="audio/mpeg"></source>
- Your browser does not support the audio element.
- </audio>
- </div>
- <script>
- function init(){
- var audioPlaying = false,
- audio
- (function() {
- audio = document.getElementById('audio');
- var audioControl = document.getElementById('audio-control');
- audioControl.addEventListener('click', audioControlHandler, false)
- }())
- function audioControlHandler(e) {
- var _self = e.target;
- if (!audioPlaying) {
- _self.classList.add('noVolume')
- audio.volume = 0
- } else {
- _self.classList.remove('noVolume')
- audio.volume = 1
- }
- audioPlaying = !audioPlaying
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/21391/83fc2ec6b3939bac464f24e05b691105.html