论坛 › 动画音画 › 老唱机之【萍水相拥】

亚伦影音工作室 发表于 2025-7-29 11:41

老唱机之【萍水相拥】

本帖最后由 亚伦影音工作室 于 2026-5-19 10:12 编辑 <br /><br /><style type="text/css">
   #papa { margin: 30px -300px; width: 1286px;height: 720px;background: url(https://pic1.imgdb.cn/item/6862641f58cb8da5c87f852b.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative; }
                :root {
        --bs1: #4d4d4d;
        --bs2: #3d3d3d;
        --arm: #dddddd;
        --bg2: #ffc000;
        --bg4: #00ff00;
        --bg1: #a27dc2;
        --bg3: #2a92bf;
}
.content {z-index: 10;
        width: 80vmin;top:250px; left: 0px;
        height: 60vmin;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;cursor: pointer;
transform:scale(1);
}

.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 0100%),
                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: #222;
        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;
}
.stop .group{animation-play-state: paused;}

.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 #ff0000;
        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;
}
.stop .name:before,
.stop .name:after{animation-play-state: paused;}
@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;
}
.stop .name:after{animation-play-state: paused;}
@keyframes shining {
        50% { transform: rotateX(60deg) rotate(3deg); }   
}

.music {
        width: 25vmin;
        height: 19vmin;
        background: #0000;
        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;
        ;

}
.stop .music span{animation-play-state: paused;}

.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;
}


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

@keyframes music-notes-dance {
        0% { transform: translateX(-1vmin); }
        100% { transform: translateX(-3vmin); }
}

#pa { top:50px; left: 80px; width: 100%; height: 460px; position: absolute; }
    .text {
      margin: 10px;
      font: bold 60px 'Microsoft YaHei', sans-serif;
      color: #bbb;
      text-shadow: 0 0 1px #000, 2px 2px 6px #000;
      display: inline-block;
    }
    .ani { animation: circle 2s linear; }
    @keyframes circle {
      to { transform: rotate(360deg); }
    }
   
.stop .ani{animation-play-state: paused;}
        </style>
        <div id="papa">
        <div id="testImg">
<div class="content">

        <div class="music">
                <span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="legs">
                <span></span><span></span><span></span>
        </div>
        <div class="turntable"></div>
        <div class="disc"></div>
        <div class="vinyl"></div>
        <div class="name"></div>
        <div class="wheel"></div>
        <div class="buttons">
                <span></span><span></span><span></span><span></span><span></span>
        </div>
        <div class="group">
                <div class="circle"></div>
                <div class="arm"></div>
                <div class="arm"></div>
                <div class="head"></div>
        </div>
        <div class="towers">
                <span></span><span></span>
        </div>
</div>
</div>
<div id="testImg1">
<div id="pa"></div>
</div>

</div>

<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/5a70-audiofreehighqps/C0/F2/GAqhqKwMPDUzACAAAAPYpogN.m4a" autoplay ></audio>
<script>
const content= document.querySelector('.content');
content.onclick = () => {aud.paused ? aud.play() : aud.pause();}
mState = () => {
          aud.paused ?(testImg.classList.add('stop'),testImg1.classList.add('stop') ) : (testImg.classList.remove('stop'),testImg1.classList.remove('stop')) ;
      };
aud.onplaying = aud.onpause = () => mState();
</script>

<script>
    const txtAr = '萍水相拥'.split('');
    let spans = [];
    txtAr.forEach( (t,k) => {
      const s = document.createElement('span');
      s.textContent = t;
      s.className = k === 0 ? 'text ani' : 'text';
      spans.push(s);
      s.onanimationend = () => {
            s.classList.remove('ani');
            spans[(k+1) % txtAr.length].classList.add('ani');
      };
      pa.appendChild(s);
    });
</script>

红影 发表于 2025-7-29 12:58

这个不但有漂亮的老唱机，还有旋转的标题字。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-7-29 14:03

老唱机，新风采，谢谢亚伦老师精彩分享{:4_190:}

亚伦影音工作室 发表于 2025-7-30 09:36

本帖最后由 亚伦影音工作室 于 2026-5-19 09:59 编辑 <br /><br />111

亚伦影音工作室 发表于 2025-7-30 09:37

6

亚伦影音工作室 发表于 2025-7-30 09:38

333

亚伦影音工作室 发表于 2025-7-30 09:38

本帖最后由 亚伦影音工作室 于 2026-5-19 10:01 编辑 <br /><br /><style>
svg {
        display: block;
        width: 100vw;
        height: 100vh;
        max-width: 100vh;
        max-height: 100vw;
        object-fit: contain;
        fill: white;
}


</style>
<svgviewBox="0 0 1594.3 1600">
        <path d="M1065.13,10.93c79.78-31.48,156.45,10.24,225.45,59.14,81.7,38.18,205.16,101.1,185.91,183.49,6.22,14.94,12.5,29.85,18.74,44.78,28.98,9.52,54.06,16,55.46,23.73,6.76,22.1,9.91,45.09,12.73,67.98.65,6.02,4.28,11.08,6.1,16.75,2.24,6.56-1.39,6.67-15.55,22.41,34.59,75.97,52.86,150.13,30.56,259.14-35.19,194.12-72.7,350.67-185.45,409.76,40.36-27.2,78.1-60.9,110.89-137.91,18.74-44.24,39.19-110.73,53.06-217.92-13.97,26.28-33.96,48.76-55.49,69.08,16.8-19.06,32.13-39.66,43.14-62.65,20.84-42.78,29.55-106.74,23.55-154.19-1.78-15.11-5.3-29.95-9.24-44.62-13.27,128.14-53.72,248.01-136.56,347.35,1.8,7.04,9.25,14.3-7.46,25.83-8.85,5.81-19.14,9.15-29.54,10.8-13.6,2.2-26.33-5.24-36.88-4.06-13.57,1.6-10.3,13.39-16.73,50.97-7.72,14.62-21.84,20.44-38.64,20.01-4.65.82-6.03-5.51-10.67-5.21,2.91,4.94,5.4,10.31,5.84,16.11,1.31,12.38-5.87,24.8-16.69,30.66-8.91-1.19-18.82-2.65-26.98,2.06-12.85,8.19-9.29,32.16-16.04,43.66-11.52,20.42-46.4,32.33-87.01,20.82-20.22-5.44-93.26-40.7-147.36-90.75-72.73,23.96-119.41,90.33-147.16,162.44,14.28,11.91,28.57,23.8,42.82,35.75,61.32,3.08,98.24,34.39,132.56,84.34,11.65,17.3-9.61-20.8,156.22,299.33-113.18-.38-1105.41-3.58-1184.69-3.74,50.44-201.67,144.76-374.68,308.86-500.85,129.46-99.79,180.59-88.87,254.73-162.47,43.33-42.82,70.41-95,89.81-152.23-22.7-18.07-35.78-40.45-36.43-70.09-44.37-22.16-75.14-60.37-86.81-117.03-26.27-14.53-52.45-29.21-78.75-43.67-19.73-3.77-34.67-11.65-47.14-30.65-5.76,19.47-11.23,39.04-15.78,58.83,1.88-22.28,6.43-44.27,11.66-65.99-2.43-5.01-5.09-10.07-6.27-15.52-9.11,32.08-16.96,64.55-22.79,97.39.8-11.04,8.82-54.34,20.62-102.94-2.44-9.07-4.44-18.27-5.63-27.58-6.51,29.37-11.89,59.03-15.82,88.86.48-21.25,4.31-62.35,13.63-112.92-.74-19.69-.02-39.4,1.51-59.03-11.01,36.89-20,74.46-25.36,112.61-5.47,37.87-8.89,85.76-8.82,93.56-.52-4.36-.18-8.76.06-13.12,4.84-125.9,28.52-199.13,31.62-213.49-7.19-80.78,50.15-128.25,62.74-149.18-84.21,72-99.35,164.98-108.11,275.62-.99,12.79-6.33,89.24-6.42,94.76-.4-2.51-.39-5.07-.32-7.6,11.43-281.96,35.85-329.55,177.48-414.01,7.26-3.9,16.37-95.93,224.62-1.48,1.39.66,62.29-2.96,63.29-3.02,55.75-49.7,123.2-102.88,196.77-115.86,9.72-4.67,19.45-9.31,29.28-13.76-73.05,9.18-141.73,40.88-206.6,76.23,2.22-1.61,92.35-58.68,225.41-85.71,8.01-1.71,16.12-2.98,24.06-4.98M997.41,38.48c7.39-1,14.87-1.22,22.29-1.63,6.35-4.68,12.87-9.13,19.6-13.25-14.54,3.18-28.25,9.1-41.89,14.89M1511.7,546.29c1.1,21.83-5.24,43.19-12.95,63.37-2.49,5.48-2.75,11.58-4.1,17.37-15.41,79.07-41.14,156.19-77.27,228.21,2.8,13.9,6.22,27.69,10.72,41.15,35.67-47.51,56.12-85.56,74.98-134.78,26.68-69.31,43.44-145.49,48.07-207.92-22.04,105.34-57.38,219.39-123.77,304.18,63.22-112.71,89.37-203.05,105.22-334.38-6.72,7.82-13.96,15.19-20.89,22.81M1454.88,707.6c-9.84,40.72-22.59,81.04-42.07,118.26.75,8.98,2.44,17.97,4.12,26.86,22.71-50.03,41.01-102.79,46.72-157.7-2.64,4.43-8.3,7.02-8.78,12.58M1410.45,760.24c-2.08,15.88-.65,42.48,1.31,57.35,12.55-33.03,23.2-66.78,32.61-100.82-36.44,41.17-32.34,34.66-33.92,43.47Z" />
</svg>

亚伦影音工作室 发表于 2025-7-30 09:39

4444

查看完整版本: 老唱机之【萍水相拥】