亚伦影音工作室 发表于 2024-10-7 15:32

请‘难’老师看看这个【喇叭】按钮咋控制不住音乐

本帖最后由 亚伦影音工作室 于 2024-12-2 06:29 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1164px;
        height: 640px;
      margin-left:-300px;
        margin-top:180px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url()no-repeat center/cover;
        overflow: hidden;
}

#play { left:30px;
        top:30px;
--line: #000;
--line-width: 6px;
--duration: .5s;
position: relative;
cursor: pointer;

}

#play input {
display: none;
}

#play input + svg {
display: block;
fill: none;
stroke: var(--line);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: var(--line-width);
width: 90px;
height: 76px;
}

#play input + svg path {
animation: var(--name) var(--duration) ease forwards
}
#play input + svg path:nth-child(2) {
stroke-dashoffset: 1px;
}
#play input + svg path:nth-child(3) {
stroke-dashoffset: 1px;
}
#play input:checked + svg path:nth-child(1) {
--name: shape;
}
#play input:checked + svg path:nth-child(2) {
--name: small;
}
#play input:checked + svg path:nth-child(3) {
--name: large;
}


#play input:not(:checked) + svg path:nth-child(1) {
--name: shape-r;
}
#play input:not(:checked) + svg path:nth-child(2) {
--name: small-r;
}
#play input:not(:checked) + svg path:nth-child(3) {
--name: large-r;
}

@keyframes small {
0%,30% {
    stroke-dasharray: 0 0 30px 64px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 43px 30px 64px;
}
100% {
    stroke-dasharray: 0 39px 30px 64px;
}
}

@keyframes small-r {
0% {
    stroke-dasharray: 0 39px 30px 64px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 30px 64px;
}
}

@keyframes large {
0%,30% {
    stroke-dasharray: 0 0 50px 84px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 82px 32px 84px;
}
100% {
    stroke-dasharray: 0 78px 32px 84px;
}
}

@keyframes large-r {
0% {
    stroke-dasharray: 0 78px 32px 84px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 50px 84px;
}
}

@keyframes shape {
0% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
70% {
    stroke-dasharray: 63px 51px 184px;
    stroke-dashoffset: 21px;
}
100% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
}

@keyframes shape-r {
0% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
100% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
}

</style>
<div id="papa" >

<label id="play">
    <input type="checkbox" id='ctrl'>
    <svg viewBox="0 0 108 96">
      <path d="M7,28 L35,28 L35,28 L59,8 L59,88 L35,68 L7,68 C4.790861,68 3,66.209139 3,64 L3,32 C3,29.790861 4.790861,28 7,28 Z"></path>
      <path d="M79,62 C83,57.3333333 85,52.6666667 85,48 C85,43.3333333 83,38.6666667 79,34 L49,3"></path>
      <path d="M95,69 C101.666667,61.6666667 105,54.3333333 105,47 C105,39.6666667 101.666667,32.3333333 95,25 L75.5,6 L49,33"></path>
    </svg>
</label>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/b5/0f/de/6615a1eb78f58c680fc5ea73f913e316/audio.mp3" autoplay="" loop="loop"></audio>
</div>

<script>
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
play.onclick = () => aud.paused && !ctrl.checked?aud.play(): aud.pause() ;
</script>

起个网名好难 发表于 2024-10-7 18:07

设计得很巧妙，做如下修改试试
1. 给 checkbox 加个 id<input type="checkbox" id='ctrl'>

2.script 段里把它加进去
<script>
//aud.addEventListener('play', () => mState());
//aud.addEventListener('pause', () => mState());
play.onclick = () => {aud.paused && !ctrl.checked ? aud.play(): aud.pause()} ;
</script>

亚伦影音工作室 发表于 2024-10-7 19:26

起个网名好难 发表于 2024-10-7 18:07
设计得很巧妙，做如下修改试试
1. 给 checkbox 加个 id



很神奇加上就控制了。老师高{:5_112:}

红影 发表于 2024-10-7 22:42

这个按钮真漂亮{:4_187:}
页: [1]
查看完整版本: 请‘难’老师看看这个【喇叭】按钮咋控制不住音乐