小辣椒 发表于 2024-9-23 22:16

欢度国庆 （学习套用黑黑Dwarf Star粒子加圆手环播放器效果）


<style>
#tz {
    margin: 130px 0 10px calc(50% - 580px);
    width: 1000px;
    height: 783px;
    background: radial-gradient(transparent 75%, transparent, #000);
    box-shadow: 2px 2px 6px #333;
    display: grid;
    place-items: center;
    z-index: 1;
    position: relative;
    --opacity: .8;
    overflow: hidden;
    border-radius: 32px;
    pointer-event: none;
}

#player {
    position: absolute;
    width: 150px;
    height: 150px;
    bottom: 20%;
    cursor: pointer;
    transition: .6s;
    opacity: .8;
    animation: rot 8s linear infinite var(--state);
    pointer-event: auto;
    z-index: 99;
}

#msvg {
    position: absolute;
    border: none;
    transition: 1.2s;
}

@keyframes rot {
    to {
      transform: rotate(1turn);
    }
}

#dt1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#dt2 {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 120px;
    left: 100px;
}

#dt3 {
    position: absolute;
    width: 397px;
    height: 125px;
    bottom: 3%;
    right: 17%;
}
</style>
<div id="tz">
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2022/05/28/01.gif" alt="" class="dynpic" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" class="dynpic" />
<img id="dt3" src="https://file.uhsea.com/2409/9d8ed563113f45ed3623b5f2f66305cfIV.png" alt="" />
<img id="player" src="https://638183.freep.cn/638183/web/svg/p2.svg" alt="" title="播放/暂停" />
<img id="msvg" src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" width="100%" height="100%" class="dynpic" />
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20231001204400.mp3" autoplay loop></audio>
</div>
<script>
var players = document.querySelectorAll('.player');
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
    papa: '#tz',
    scale: ,
    css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: #eee;',
});
//====================== 动态图片启停控制扩展============================
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
      this.storeCanvas.parentElement.removeChild(this.storeCanvas);
      this.storeCanvas = null;
      this.style.opacity = ''
      }
      if (this.storeUrl) {
      this.src = this.storeUrl
      }
    };
    HTMLImageElement.prototype.stop = function() {
      let suff = this.src.substr(-4);
      if (suff == '.') suff = suff.substr(1);
      if (suff == 'jpg') suff = 'jpeg';
      this.type = 'image/' + suff;
      var canvas = document.createElement('canvas');
      var width = this.width,
      height = this.height;
      if (width && height) {
      if (!this.storeUrl) {
          this.storeUrl = this.src
      }
      canvas.width = width;
      canvas.height = height;
      canvas.style.top = this.style.top;
      canvas.style.left = this.style.left;
      canvas.style.right = this.style.right;
      canvas.style.bottom = this.style.bottom;
      canvas.getContext('2d').drawImage(this, 0, 0, width, height);
      try {
          this.src = canvas.toDataURL(this.type)
      } catch (e) {
          this.removeAttribute('src');
          canvas.style.position = 'absolute';
          this.parentElement.insertBefore(canvas, this);
          this.style.opacity = '0';
          this.storeCanvas = canvas
      }
      }
    }
}
//=======================================================================
let dynpics = tz.querySelectorAll('.dynpic');
dynpicCtrl = (bool) => {
    bool ? dynpics.forEach(pic => pic.play()) : dynpics.forEach(pic => pic.stop())
}
mState = () => {
    tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    //msvg.style.setProperty('opacity', aud.paused ? '0' : '.8');
    dynpicCtrl(!aud.paused);
    player.title = aud.paused ? '播放' : '暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => {
    dynpicCtrl(aud.paused);
    aud.paused ? aud.play() : aud.pause();
}
</script>

小辣椒 发表于 2024-9-23 22:19

@马黑黑

直接套用玩一次了{:4_205:}

小辣椒 发表于 2024-9-23 22:19

提前祝伟大祖国75周年华诞{:4_177:}{:4_204:}

马黑黑 发表于 2024-9-23 22:32

全屏下非常壮丽

小辣椒 发表于 2024-9-23 22:36

马黑黑 发表于 2024-9-23 22:32
全屏下非常壮丽

是啊，我也是感觉好漂亮，对了要感谢一下岁月，背景是岁月的AE粒子效果

@走过岁月 岁月用了你的粒子效果，反正你的就是我的{:4_170:}

红影 发表于 2024-9-23 23:09

这粒子效果用在这个背景中很漂亮呢，亲爱的这个做得好{:4_199:}

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

看到黑黑加精了，这个庆祝国庆的，我来帮着加个高亮色{:4_187:}

起个网名好难 发表于 2024-9-24 07:38

画面16：9可能更好些

梦江南 发表于 2024-9-24 08:23

真漂亮！提前祝国庆节快乐！{:4_187:}

梦油 发表于 2024-9-24 09:11

         伟大的祖国万岁！
预祝小辣椒和朋友们国庆节快乐！

走过岁月 发表于 2024-9-24 13:11

小辣椒 发表于 2024-9-23 22:36
是啊，我也是感觉好漂亮，对了要感谢一下岁月，背景是岁月的AE粒子效果

@走过岁月 岁月用了你的粒子效 ...

随便用

走过岁月 发表于 2024-9-24 13:13

欣赏小辣椒的作品

醉美水芙蓉 发表于 2024-9-24 16:51

冬天的雨 发表于 2024-9-24 19:12

画面很炫酷，效果很耀眼，可惜冬雨没有耳麦，听不到音乐

冬天的雨 发表于 2024-9-24 21:07

С裬

冬天的雨 发表于 2024-9-24 21:08

大爱我的祖国，祝福祖国75华诞{:4_178:}

冬天的雨 发表于 2024-9-24 21:08

漂亮的粒子效果，而且是可以一键停止的{:4_199:}

小辣椒 发表于 2024-9-25 20:49

冬天的雨 发表于 2024-9-24 21:08
漂亮的粒子效果，而且是可以一键停止的

冬雨晚上好，谢谢欣赏，难得看见你了{:4_197:}{:4_185:}

小辣椒 发表于 2024-9-25 20:59

走过岁月 发表于 2024-9-24 13:11
随便用

嗯，好的{:4_205:}

小辣椒 发表于 2024-9-25 21:00

红影 发表于 2024-9-23 23:09
这粒子效果用在这个背景中很漂亮呢，亲爱的这个做得好
这个效果感觉很漂亮的，不过都是岁月的AE制作
页: [1] 2
查看完整版本: 欢度国庆 （学习套用黑黑Dwarf Star粒子加圆手环播放器效果）