小辣椒 发表于 2025-2-19 22:57

爱情里没有谁对谁错--学习图片转换效果

<style>
#papa { --state: running; --showbackface: visible; margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 710px; background: url('https://xlaj.cn/upfile/2025/02/14/002.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.5); perspective: 4000px; z-index: 1; position: relative; }
#papa:hover #backface { display: inline-block; }
#mplayer { position: absolute; left: 320px; top: 110px; width: 150px; height: 260px; transform-style: preserve-3d; display: grid;place-item: center; animation: rot 20s linear infinite var(--state); }
#mplayer:hover { --state: paused; }
.image { position: absolute; width: 100%; height: 100%; border-radius: 8px; filter: drop-shadow(2px 2px 20px #000); cursor: pointer; transition: .7s; backface-visibility: var(--showbackface); transform: rotateY(var(--deg)) translateZ(300px); }
.image:hover { transform: rotateY(var(--deg)) translateZ(300px) scale(1.2); }
#backface { position: absolute; bottom: 35%;left: 35%; border-radius: 6px; cursor: pointer; display: none; }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>

<div id="papa">
      <div id="mplayer"></div>
      <input id="backface" type="button" value="隐藏背面" />
      <audio id="aud" src="https://i.mp3.wf/223347596.mp3" autoplay loop></audio>
</div>

<script>
var mState = () => {
      papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      mplayer.title = aud.paused ? '点击播放' : '点击暂停';
};
var pics = [
      'https://xlaj.cn/upfile/2025/02/14/01.jpg',
      'https://xlaj.cn/upfile/2025/02/14/02.jpg',
      'https://xlaj.cn/upfile/2025/02/14/03.jpg',
      'https://xlaj.cn/upfile/2025/02/14/04.jpg',
      'https://xlaj.cn/upfile/2025/02/14/05.jpg',
      'https://xlaj.cn/upfile/2025/02/14/06.jpg',
      'https://xlaj.cn/upfile/2025/02/14/07.jpg',
      'https://xlaj.cn/upfile/2025/02/14/08.jpg',
];
Array.from({length: pics.length}).forEach((img,key) => {
      img = document.createElement('img');
      img.className = 'image';
      img.style.cssText += `--deg: ${key * 360 / pics.length}deg`;
      img.src = pics;
      mplayer.appendChild(img);
});
aud.onpause = aud.onplaying = () => mState();
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
backface.onclick = () => {
      if(backface.value === '隐藏背面') {
                papa.style.setProperty('--showbackface', 'hidden');
                backface.value = '显示背面';
      }else{
                papa.style.setProperty('--showbackface', 'visible');
                backface.value = '隐藏背面';
      }
};
papa.scrollIntoView(true);
</script>

liumang 发表于 2025-2-20 22:45

一样的歌曲，一样的背景，不一样的特效{:5_150:}

liumang 发表于 2025-2-20 22:46

欣赏小辣椒的图片转换特效{:5_150:}
页: [1]
查看完整版本: 爱情里没有谁对谁错--学习图片转换效果