梦江南 发表于 2024-10-8 11:48

重阳安康，学习黑黑老师Analogue Dreams代码

<style>
#mama {
      margin: 30px 0 30px calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/6704a7b2d29ded1a8c270994.gif') no-repeat center/cover;
      border-radius: 6px;
      box-shadow: 3px 3px 8px gray;
      position: relative;
}
#bsvg {
      position: absolute;
      border-radius: 6px;
}
#player {
      --deg: 4turn;
      cursor: pointer;
      transform-origin: 512px 400px;
      animation: rot 10s linear infinite alternate var(--state);
}
#player:hover {
      --deg: 2turn;
}
.linepath {
      stroke-dasharray: 1664;
      animation: draw 10s linear infinite alternate var(--state);
}
@keyframes draw {
      from { stroke-dashoffset: 1664; }
      to { stroke-dashoffset: 0; }
}
@keyframes erase {
      from { stroke-dashoffset: 0; }
      to { stroke-dashoffset: 1664; }
}
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="mama">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2632798401" autoplay loop></audio>

      

      <svg id="bsvg" width="100%" height="100%" fill="none" stroke="green" stroke-width="10" stroke-lineCap="round">
                <defs>
                        <g id="cpath" fill="rgba(0,100,100,.25)" stroke="yellow" stroke-width="2">
                              <title id="ctrMsg">播放/暂停</title>
                              <path d="M100 120,C-10 -30,210 -30,100 120"/>
                              <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(72 100 100)"/>
                              <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(144 100 100)"/>
                              <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(216 100 100)"/>
                              <path d="M100 120,C-10 -30,210 -30,100 120" transform="rotate(288 100 100)"/>
                        </g>
                </defs>
                <rect x="0" y="0" width="100%" height="100%" stroke="rgba(0,0,0,.2)"/>
                <path class="linepath" d="M0 0 H1024 V640" />
                <path class="linepath" d="M1024 640 H0 V0" />
                <ellipse cx="512" cy="550" rx="80" ry="30" stroke="none" fill="rgba(0,100,100,.35)"/>
                <rect x="506" y="400" width="12" height="150" stroke="none" fill="rgba(0,100,100,.25)"/>
                <use id="player" href="#cpath" x="412" y="300" width="200" height="200"/>
      </svg>


</div>

<script>
mState = () => {
      mama.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      ctrMsg.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

起个网名好难 发表于 2024-10-8 15:01

一转眼重阳又要到了， 日子过得真快呀。

梦江南 发表于 2024-10-8 15:43

起个网名好难 发表于 2024-10-8 15:01
一转眼重阳又要到了， 日子过得真快呀。

是啊，重阳到，人物非。

梦江南 发表于 2024-10-8 15:44

谢谢老师支持，问好！{:4_204:}

红影 发表于 2024-10-8 21:20

这个还真像电风扇呢。那小猫咪可爱，眼睛还会眨呢。
欣赏江南好帖{:4_187:}

红影 发表于 2024-10-8 21:21

马上重阳节了，借江南好帖，同祝大家重阳节快乐{:4_187:}

梦江南 发表于 2024-10-9 08:57

红影 发表于 2024-10-8 21:20
这个还真像电风扇呢。那小猫咪可爱，眼睛还会眨呢。
欣赏江南好帖

黑黑老师的这个风扇代码只能移动杆子底盘，上面的风扇移动不了，只好改变图片中人物和沙发来完成了。图片太单调，就加上了只猫咪来增加趣味了。{:4_204:}

梦江南 发表于 2024-10-9 08:58

红影 发表于 2024-10-8 21:21
马上重阳节了，借江南好帖，同祝大家重阳节快乐

谢谢影子鼓励，祝大家重阳节安康！{:4_204:}

红影 发表于 2024-10-9 10:35

梦江南 发表于 2024-10-9 08:57
黑黑老师的这个风扇代码只能移动杆子底盘，上面的风扇移动不了，只好改变图片中人物和沙发来完成了。图片 ...

风扇应该是可以调位置的吧，感觉需要定义转动中心和路径以及其他对应数据，就可以调动了{:4_173:}

红影 发表于 2024-10-9 10:36

梦江南 发表于 2024-10-9 08:58
谢谢影子鼓励，祝大家重阳节安康！

很温暖的祝福，谢谢江南{:4_187:}

小辣椒 发表于 2024-10-9 11:51

梦江南 发表于 2024-10-9 08:57
黑黑老师的这个风扇代码只能移动杆子底盘，上面的风扇移动不了，只好改变图片中人物和沙发来完成了。图片 ...

这样效果也是挺好，梦江南很聪明的{:4_199:}

小辣椒 发表于 2024-10-9 11:52

欣赏梦江南的精彩制作{:4_199:}

梦江南 发表于 2024-10-9 13:56

红影 发表于 2024-10-9 10:35
风扇应该是可以调位置的吧，感觉需要定义转动中心和路径以及其他对应数据，就可以调动了

风扇的代码太复杂，不会调。{:4_201:}

梦江南 发表于 2024-10-9 13:57

红影 发表于 2024-10-9 10:36
很温暖的祝福，谢谢江南

谢谢影子！重阳快乐！{:4_204:}

梦江南 发表于 2024-10-9 13:59

小辣椒 发表于 2024-10-9 11:51
这样效果也是挺好，梦江南很聪明的

哈哈，这还叫聪明啊，这是无奈之举呢。

红影 发表于 2024-10-9 20:49

梦江南 发表于 2024-10-9 13:56
风扇的代码太复杂，不会调。

我也没去试过，不知道具体是怎么调呢{:4_173:}

红影 发表于 2024-10-9 20:50

梦江南 发表于 2024-10-9 13:57
谢谢影子！重阳快乐！

好像后天就重阳了吧，相约一起登高赏菊去，各自找自己地方的山爬一下{:4_173:}

梦江南 发表于 2024-10-10 09:25

红影 发表于 2024-10-9 20:49
我也没去试过，不知道具体是怎么调呢

我看飞飞老师也说风扇没调好，别说我了。

梦江南 发表于 2024-10-10 09:42

红影 发表于 2024-10-9 20:50
好像后天就重阳了吧，相约一起登高赏菊去，各自找自己地方的山爬一下

好啊，我在网上爬，您带着家人去爬山。

梦油 发表于 2024-10-10 09:42

祝花潮的老年朋友健康长寿、幸福快乐！
页: [1] 2
查看完整版本: 重阳安康，学习黑黑老师Analogue Dreams代码