朵拉 发表于 2023-11-25 19:20

You are beautiful（马黑黑原创）

本帖最后由 朵拉 于 2023-11-25 19:22 编辑 <br /><br /><style>
#mysvg {
      display: block;
      margin: -70px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/6561d891c458853aeffa82ba.webp') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      z-index: 1;
      position: relative;
}

#san > g { opacity: 0.75; }

</style>

<svg id="mysvg">
      <symbol id="san">
                <g transform="rotate(0,100 100)">
                        <path d="M 100 100 L200.00 100.00 A 100 100 0 0 1 162.35 21.82 L100 100" fill="red" />
                        <path d="M 100 100 L162.35 21.82 A 100 100 0 0 1 77.75 2.51 L100 100" fill="orange" />
                        <path d="M 100 100 L77.75 2.51 A 100 100 0 0 1 9.90 56.61 L100 100" fill="yellow" />
                        <path d="M 100 100 L9.90 56.61 A 100 100 0 0 1 9.90 143.39 L100 100" fill="green" />
                        <path d="M 100 100 L9.90 143.39 A 100 100 0 0 1 77.75 197.49 L100 100" fill="cyan" />
                        <path d="M 100 100 L77.75 197.49 A 100 100 0 0 1 162.35 178.18 L100 100" fill="blue" />
                        <path d="M 100 100 L162.35 178.18 A 100 100 0 0 1 200.00 100.00 L100 100" fill="purple" />
                        <circle id="yuan" cx="100" cy="100" r="5" fill="silver" />
                        <animateTransform attributeName="transform" type="rotate" to="360,100 100" repeatCount="indefinite" dur="6s" />
                </g>
      </symbol>
      <use x="810" y="10" height="200" width="200" href="#san" transform="rotate(10)" />
</svg>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2088487309" 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-25 19:22

@马黑黑
马师 晚上好，学生交作业，请指正哈{:4_190:}

红影 发表于 2023-11-25 20:48

很漂亮的制作。欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2023-11-25 21:19

你是漂酿哒{:4_170:}

樵歌 发表于 2023-11-26 11:12

很漂亮的作业！{:4_187:}
页: [1]
查看完整版本: You are beautiful（马黑黑原创）