红影 发表于 2023-11-23 00:06

《有点甜》（学习黑黑七色伞效果）


<style>
#mysvg {
      display: block;
      margin: 20px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/655e1d35c458853aefabda49.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      z-index: 1;
      position: relative;
}

#san > g { opacity: 0.55; }

</style>

<svg id="mysvg">
      <symbol id="san">
                <g transform="rotate(0,200 200)">
                        <path d="M 200 200 L400.00 200.00 A 200 200 0 0 1 324.70 43.64 L200 200" fill="red" />
                        <path d="M 200 200 L324.70 43.64 A 200 200 0 0 1 155.50 5.02 L200 200" fill="orange" />
                        <path d="M 200 200 L155.50 5.02 A 200 200 0 0 1 19.80 113.22 L200 200" fill="yellow" />
                        <path d="M 200 200 L19.80 113.22 A 200 200 0 0 1 19.80 286.78 L200 200" fill="green" />
                        <path d="M 200 200 L19.80 286.78 A 200 200 0 0 1 155.50 394.98 L200 200" fill="cyan" />
                        <path d="M 200 200 L155.50 394.98 A 200 200 0 0 1 324.70 356.36 L200 200" fill="blue" />
                        <path d="M 200 200 L324.70 356.36 A 200 200 0 0 1 400.00 200.00 L200 200" fill="purple" />
                        <circle id="yuan" cx="200" cy="200" r="5" fill="silver" />
                        <animateTransform attributeName="transform" type="rotate" to="360,200 200" repeatCount="indefinite" dur="6s" />
                </g>
      </symbol>
      <use x="80" y="96" height="400" width="400" href="#san" transform="rotate(10)" />
</svg>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453522009" autoplay loop ></audio>

<script>

let mState = () => aud.paused ? mysvg.pauseAnimations() : mysvg.unpauseAnimations();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
san.addEventListener('click', () => {
      aud.paused ? aud.play() : aud.pause();
});

</script>

红影 发表于 2023-11-23 00:08

把小伞变大已经折腾了半天，然后，想加歌词，发现加不进去。在svg里不知道怎么加，加了div变成上下两个画面了，一个放歌词一个转花伞@马黑黑 {:4_173:}

红影 发表于 2023-11-23 00:10

只能再把歌词去掉，就这样了。

其实我错了，把花伞变成图片，然后就能用div了，可惜刚想到，做好的歌词就这么删了{:4_173:}

红影 发表于 2023-11-23 00:11

好了不折腾了，不知不觉这么晚了{:4_201:}

红影 发表于 2023-11-23 00:15

其实原图上有把伞，在上面又加了一把七色伞，量好的尺寸，结果因为七色伞凹下去的缘故，让原本的伞露到外面了，只能再重新折腾底图去，再去调伞太麻烦了。

马黑黑 发表于 2023-11-23 07:17

红影 发表于 2023-11-23 00:08
把小伞变大已经折腾了半天，然后，想加歌词，发现加不进去。在svg里不知道怎么加，加了div变成上下两个画面 ...

svg在HTML中的应用，其实还是给他套一个div的好，并把svg当成是HTML的一个元素。

如果确实需要svg作为容器摆下所有的帖子元素，那么，一切都将由svg完成。若此，做歌词同步，我们之前的歌词同步实现机制，对此无能为力。

小文 发表于 2023-11-23 12:31

伞中男女太笨了，这种时候应该抱一抱呀！样子看着像外国人，莫不是偷情男女，哈哈！恩师莫怪！小文经常喜欢看图就胡思乱想，文字反倒不怎么去在乎了。伞做得真漂亮，喜欢！

樵歌 发表于 2023-11-23 13:01

很有创意，用伞来作媒介，让爱情朦朦胧胧的回味无穷{:4_189:}

红影 发表于 2023-11-23 13:09

马黑黑 发表于 2023-11-23 07:17
svg在HTML中的应用，其实还是给他套一个div的好，并把svg当成是HTML的一个元素。

如果确实需要svg作为 ...

嗯嗯，昨天试了半天，都加不上歌词{:4_173:}

红影 发表于 2023-11-23 13:10

小文 发表于 2023-11-23 12:31
伞中男女太笨了，这种时候应该抱一抱呀！样子看着像外国人，莫不是偷情男女，哈哈！恩师莫怪！小文经常喜欢 ...

呵呵，我随意找图，看到这个，感觉可以用上那把彩虹伞，就做来这个，也没去管里面的人是不是外国人{:4_173:}

红影 发表于 2023-11-23 13:11

樵歌 发表于 2023-11-23 13:01
很有创意，用伞来作媒介，让爱情朦朦胧胧的回味无穷

主要是用来学习一下黑黑新的彩虹伞效果。谢谢师兄夸奖{:4_187:}

马黑黑 发表于 2023-11-23 13:34

红影 发表于 2023-11-23 13:09
嗯嗯，昨天试了半天，都加不上歌词

你若能掌握svg的文本标签，也许可以，但要做到同步模拟，这个难

红影 发表于 2023-11-23 13:44

马黑黑 发表于 2023-11-23 13:34
你若能掌握svg的文本标签，也许可以，但要做到同步模拟，这个难

这个我哪会啊{:4_170:}

马黑黑 发表于 2023-11-23 20:37

红影 发表于 2023-11-23 13:44
这个我哪会啊

慢慢会会的

红影 发表于 2023-11-23 20:46

马黑黑 发表于 2023-11-23 20:37
慢慢会会的

可以有更简单的办法啊，你讲过把svg当图片用的，这样就可以用熟悉的div了{:4_173:}

马黑黑 发表于 2023-11-23 21:34

红影 发表于 2023-11-23 20:46
可以有更简单的办法啊，你讲过把svg当图片用的，这样就可以用熟悉的div了

那是的额

红影 发表于 2023-11-23 21:45

马黑黑 发表于 2023-11-23 21:34
那是的额

看到黑黑已经把图片地址给出来了{:4_199:}

马黑黑 发表于 2023-11-23 22:54

红影 发表于 2023-11-23 21:45
看到黑黑已经把图片地址给出来了

{:4_190:}

红影 发表于 2023-11-24 09:43

马黑黑 发表于 2023-11-23 22:54


如果用个黑黑给的图，这个里面就能把歌词加进去了，可惜我在试帖子时，发现歌词加不进去，就把歌词删了，懒得再去做一遍了{:4_189:}

止戈为武 发表于 2023-11-24 18:51

我怎么看不到呢？
页: [1] 2 3
查看完整版本: 《有点甜》（学习黑黑七色伞效果）