Minimal bass

马黑黑 发表于 2025-2-17 12:18

本帖最后由马黑黑于 2025-2-17 12:20 编辑 <br /><br /><style>
#papa { --state: running; --showbackface: visible; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/5/R-C_result.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; right: 330px; top: 120px; width: 260px; height: 450px; 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: 50px; right: 400px; 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://music.163.com/song/media/outer/url?id=1859982992" autoplay loop></audio>
</div>

<script>
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.title = aud.paused ? '点击播放' : '点击暂停';
};
var pics = [
'https://638183.freep.cn/638183/t24/biu/ji01.jpg',
'https://638183.freep.cn/638183/t24/biu/ji02.jpg',
'https://638183.freep.cn/638183/t24/biu/ji03.jpg',
'https://638183.freep.cn/638183/t24/biu/ji04.jpg',
'https://638183.freep.cn/638183/t24/biu/ji05.jpg',
'https://638183.freep.cn/638183/t24/biu/ji06.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>

马黑黑 发表于 2025-2-17 12:19

本帖最后由马黑黑于 2025-2-17 12:21 编辑

帖子代码
<style>
#papa { --state: running; --showbackface: visible; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/5/R-C_result.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; right: 330px; top: 120px; width: 260px; height: 450px; 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: 50px; right: 400px; 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://music.163.com/song/media/outer/url?id=1859982992" autoplay loop></audio>
</div>

<script>
var mState = () => {
   papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   mplayer.title = aud.paused ? '点击播放' : '点击暂停';
};
var pics = [
   'https://638183.freep.cn/638183/t24/biu/ji01.jpg',
   'https://638183.freep.cn/638183/t24/biu/ji02.jpg',
   'https://638183.freep.cn/638183/t24/biu/ji03.jpg',
   'https://638183.freep.cn/638183/t24/biu/ji04.jpg',
   'https://638183.freep.cn/638183/t24/biu/ji05.jpg',
   'https://638183.freep.cn/638183/t24/biu/ji06.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>

马黑黑 发表于 2025-2-17 12:19

相关说明：CSS 3d属性：backface-visibility - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

朵拉发表于 2025-2-17 12:29

这版更加动感十足，欣赏学习咯~~{:4_190:}

红影发表于 2025-2-17 12:59

哦，原来隐藏背面就变得什么都没有了，还以为是白板呢，原来直接就变透明了{:4_173:}

红影发表于 2025-2-17 13:00

鼠标触碰时变大，只有点击时才是暂停{:4_204:}

樵歌发表于 2025-2-17 13:23

还可以金屋藏娇{:4_189:}

梦江南 发表于 2025-2-17 15:46

会旋转美女的真漂亮，学习了！

马黑黑 发表于 2025-2-17 18:22

梦江南发表于 2025-2-17 15:46
会旋转美女的真漂亮，学习了！

{:4_190:}

马黑黑 发表于 2025-2-17 18:22

朵拉发表于 2025-2-17 12:29
这版更加动感十足，欣赏学习咯~~

{:4_190:}

马黑黑 发表于 2025-2-17 18:23

樵歌发表于 2025-2-17 13:23
还可以金屋藏娇

{:4_172:}

马黑黑 发表于 2025-2-17 18:24

红影发表于 2025-2-17 12:59
哦，原来隐藏背面就变得什么都没有了，还以为是白板呢，原来直接就变透明了

有实例比较好理解

马黑黑 发表于 2025-2-17 18:25

红影发表于 2025-2-17 13:00
鼠标触碰时变大，只有点击时才是暂停

指针交互有两种情形：CSS层面的，JS层面的，后者能做的更多

红影发表于 2025-2-17 19:49

马黑黑发表于 2025-2-17 18:24
有实例比较好理解

是的，这比说了多少都更有用{:4_187:}

红影发表于 2025-2-17 19:49

马黑黑发表于 2025-2-17 18:25
指针交互有两种情形：CSS层面的，JS层面的，后者能做的更多

js很强大，只是还不太适应它{:4_173:}

马黑黑 发表于 2025-2-17 20:30

红影发表于 2025-2-17 19:49
js很强大，只是还不太适应它
编程嘛，需要记住和理解它的语法，它的变量，它的函数，它的API，等等等等

马黑黑 发表于 2025-2-17 20:31

红影发表于 2025-2-17 19:49
是的，这比说了多少都更有用

但是，说是非常有必要的

花飞飞 发表于 2025-2-17 20:43

看到贴子的时候就被这个效果惊艳到了，
特别想说这种卡片按角度转动以前在绘声绘影视频软件里出现过，
现在用代码整出来的效果是真是完全不输专业视频软件~~
代码是真的够强大。。厉害

花飞飞 发表于 2025-2-17 20:46

卡片尺寸比例看上去相当舒适，
圆角设计，还有触碰放大，触碰出现隐藏按纽，触碰出现播放暂停提示，细节满满。。。
加上养眼的背景，视觉感和体验感特别好~{:4_173:}

花飞飞 发表于 2025-2-17 20:47

音乐轻快，节奏感强，适配画面旋转。怪好听的。。

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

Minimal bass