小辣椒 发表于 2022-7-21 21:08

学习黑黑的图片转换效果（今天分享的）

<style>
#papa { left: -340px; width: 1280px; height: 720px; top: 150px; display: grid; place-items: center; background: lightblue url('https://pic.imgdb.cn/item/62d91c2ef54cd3f9376dbc16.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
#son { width: 700px; box-shadow: inherit; transform: scale(0) rotate(0); }
@keyframes in0 { from { transform: translate(-200%, -150%); } to { transform: translate(0%, 0%); } }
@keyframes out0 { from { transform: translate(0%, 0%); } to { transform: translate(200%, -150%); } }
@keyframes in1 { from { transform: translate(200%, -150%); } to { transform: translate(0%, 0%); } }
@keyframes out1 { from { transform: translate(0%, 0%); } to { transform: translate(200%, 150%); } }
@keyframes in2 { from { transform: translate(200%, 150%); } to { transform: translate(0%, 0%); } }
@keyframes out2 { from { transform: translate(0%, 0%); } to { transform: translate(-200%, 150%); } }
@keyframes in3 { from { transform: translate(-200%, 150%); } to { transform: translate(0%, 0%); } }
@keyframes out3 { from { transform: translate(0%, 0%); } to { transform: translate(-200%, -150%); } }
#papa p { margin: 0; padding: 0; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#playbox { position: absolute; left: 10px; bottom: 610px; padding: 10px; font: normal 1em sans-serif; color: #eee; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div id="papa">
      <img id="son" alt="" src="https://pic.imgdb.cn/item/62d91c62f54cd3f9376eb395.jpg" />
      <div id="playbox">
                <p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">00:00</span>
                </p>
      </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30413271.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aniId = 0, picId = 0;
let lrcAr = [ ['0.00','水墨丹青--纯音乐'], ['180.00','谢谢欣赏'] ];
let picAr = [
    'https://pic.imgdb.cn/item/62d91c62f54cd3f9376eb395.jpg',
    'https://pic.imgdb.cn/item/62d91c88f54cd3f9376f64f3.jpg',
    'https://pic.imgdb.cn/item/62d91c7bf54cd3f9376f2e2b.jpg',
    'https://pic.imgdb.cn/item/62d91c73f54cd3f9376f049f.jpg',
    'https://pic.imgdb.cn/item/62d91c6cf54cd3f9376ee464.jpg',
    'https://pic.imgdb.cn/item/62d91c80f54cd3f9376f453b.jpg'
];

let objAni = {
      0: 'in0', 1: 'out0', 2: 'in1', 3: 'out1', 4: 'in2', 5: 'out2', 6: 'in3', 7: 'out3',
      playMode: function() {
                if(aniId % 2 == 0) {
                        son.src = picAr;
                        picId ++;
                        if(picId > picAr.length - 1) picId = 0;
                }
                son.style.animation = this +' 2s linear forwards';
                aniId ++;
                if(aniId > 7) aniId = 0;
      },
}

objAni.playMode()
setInterval('objAni.playMode()', 4000);

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
      let prog = 100 * aud.currentTime / aud.duration;
      slider.value = prog;
      per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr) geci.innerHTML = lrcAr;
      }
});

let toMin = (val) => {
      if(!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60);
      let sec = parseFloat(val % 60);
      if(min < 10) min = '0' + min;
      if(sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br>

绿叶清舟 发表于 2022-7-21 21:10

辣椒真快啊，漂亮的

小辣椒 发表于 2022-7-21 21:10

@马黑黑

黑黑，套用确实速度了{:4_170:}

小辣椒 发表于 2022-7-21 21:11

人物图图淘宝店里面取的

小辣椒 发表于 2022-7-21 21:12

纯美女图图好像还是淘宝里面的有点个性{:4_170:}

马黑黑 发表于 2022-7-21 21:27

好冷，我去找件棉衣

马黑黑 发表于 2022-7-21 21:27

{:4_170:}

小辣椒 发表于 2022-7-21 21:28

马黑黑 发表于 2022-7-21 21:27
好冷，我去找件棉衣

就是想高温中来点凉飕飕的感觉{:4_170:}

马黑黑 发表于 2022-7-21 21:29

小辣椒 发表于 2022-7-21 21:28
就是想高温中来点凉飕飕的感觉

这也太冷了{:4_189:}

小辣椒 发表于 2022-7-21 21:30

马黑黑 发表于 2022-7-21 21:29
这也太冷了

真有这个效果就太棒了{:4_170:}

为自己点赞{:4_172:}

马黑黑 发表于 2022-7-21 21:30

小辣椒 发表于 2022-7-21 21:30
真有这个效果就太棒了

为自己点赞

有的有的

小辣椒 发表于 2022-7-21 21:32

绿叶清舟 发表于 2022-7-21 21:10
辣椒真快啊，漂亮的

清舟这个是很快的，直接网络搜索一下，小图淘宝里面取

樵歌 发表于 2022-7-21 21:46

不愧黒黑大弟子！{:4_173:}

小辣椒 发表于 2022-7-21 21:51

樵歌 发表于 2022-7-21 21:46
不愧黒黑大弟子！

哈哈~~黑黑大弟子应该是队长{:4_170:}

红影 发表于 2022-7-21 21:55

看到标题，还以为是发重了，原来是又一个啊，而且风格完全不同。亲爱的好棒{:4_199:}

马黑黑 发表于 2022-7-21 21:56

小辣椒 发表于 2022-7-21 21:11
人物图图淘宝店里面取的

当心淘宝告你侵权{:4_170:}

马黑黑 发表于 2022-7-21 21:57

樵歌 发表于 2022-7-21 21:46
不愧黒黑大弟子！

你这黑黑两字怎么高低不同的

马黑黑 发表于 2022-7-21 21:58

樵歌 发表于 2022-7-21 21:46
不愧黒黑大弟子！

笔画也不一致{:4_203:}

小辣椒 发表于 2022-7-21 22:03

红影 发表于 2022-7-21 21:55
看到标题，还以为是发重了，原来是又一个啊，而且风格完全不同。亲爱的好棒

亲爱的，我是上来发活动帖，看见黑黑分享了2个。我就套用了玩的，套用就快

小辣椒 发表于 2022-7-21 22:04

马黑黑 发表于 2022-7-21 21:56
当心淘宝告你侵权

我基本就淘宝找人物图图，{:4_173:}
页: [1] 2 3
查看完整版本: 学习黑黑的图片转换效果（今天分享的）