天镜 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 动画音画 › 天镜

马黑黑 发表于 2024-3-8 12:35

天镜

<style>
#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 800px; background: url('https://638183.freep.cn/638183/t24/1/skymirror.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#papa::before { position: absolute; content: ''; left: 270px; top: 298px; width: 685px; height: 448px; border-radius: 50%; transition: 2s; background: url('https://638183.freep.cn/638183/t24/1/skymirror.jpg') -270px -298px; box-shadow: inset 0 0 100px red; animation: flash 20s infinite alternate var(--state); }
#papa:hover::before, #papa:hover #vid { transform: scale(1.1); }
#papa > img { position: absolute; mix-blend-mode: multiply; cursor: pointer; }
#papa > img:nth-of-type(1) { top: 600px; }
#papa > img:nth-of-type(2) { top: 600px; right: 0; transform: rotateY(180deg); }
#papa > img:nth-of-type(3) { top: 500px; left: 40%; transform: rotateX(180deg); filter: opacity(.8) blur(1px); }
#vid {position: absolute; left: 270px; top: 298px; width: 685px; height: 448px; border-radius: 50%; object-fit: cover; mix-blend-mode: screen; transition: 2s; pointer-events: none; }
@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>

<div id="papa">

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1988547254" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e902755687.mp4" autoplay loop muted></video>
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
<img src="https://638183.freep.cn/638183/Pic/81/bird3.gif" alt="" />
</div>

<script>
(function() {
let mState = () => aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause())
: (papa.style.setProperty('--state', 'running'), vid.play())
;
aud.onpause = aud.onplaying = () => mState();
vid.disablePictureInPicture = true;
let pics = document.querySelectorAll('#papa > img');
pics.forEach(pic => pic.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>

马黑黑 发表于 2024-3-8 12:36

<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#papa { <span class="tBlue">margin:</span> 30px 0 30px calc(50% - 681px); <span class="tBlue">width:</span> 1200px; <span class="tBlue">height:</span> 800px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/skymirror.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 20px #000; <span class="tBlue">position:</span> relative; <span class="tBlue">z-index:</span> 1; }</cl-cd>
<cl-cd data-idx="3">#papa::before { <span class="tBlue">position:</span> absolute; <span class="tBlue">content:</span> <span class="tMagenta">''</span>; <span class="tBlue">left:</span> 270px; <span class="tBlue">top:</span> 298px; <span class="tBlue">width:</span> 685px; <span class="tBlue">height:</span> 448px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">transition:</span> 2s; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/skymirror.jpg'</span>) -270px -298px; <span class="tBlue">box-shadow:</span> inset 0 0 100px red; <span class="tBlue">animation:</span> flash 20s infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4">#<span class="tBlue">papa:</span>hover::before, #<span class="tBlue">papa:</span>hover #vid { <span class="tBlue">transform:</span> scale(1.1); }</cl-cd>
<cl-cd data-idx="5">#papa > img { <span class="tBlue">position:</span> absolute; <span class="tBlue">mix-blend-mode:</span> multiply; <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="6">#papa > <span class="tBlue">img:</span>nth-of-type(1) { <span class="tBlue">top:</span> 600px; }</cl-cd>
<cl-cd data-idx="7">#papa > <span class="tBlue">img:</span>nth-of-type(2) { <span class="tBlue">top:</span> 600px; <span class="tBlue">right:</span> 0; <span class="tBlue">transform:</span> rotateY(180deg); }</cl-cd>
<cl-cd data-idx="8">#papa > <span class="tBlue">img:</span>nth-of-type(3) { <span class="tBlue">top:</span> 500px; <span class="tBlue">left:</span> 40%; <span class="tBlue">transform:</span> rotateX(180deg); <span class="tBlue">filter:</span> opacity(.8) blur(1px); }</cl-cd>
<cl-cd data-idx="9">#vid {<span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 270px; <span class="tBlue">top:</span> 298px; <span class="tBlue">width:</span> 685px; <span class="tBlue">height:</span> 448px; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">transition:</span> 2s; <span class="tBlue">pointer-events:</span> none; }</cl-cd>
<cl-cd data-idx="10">@keyframes flash { to { <span class="tBlue">filter:</span> hue-rotate(360deg); } }</cl-cd>
<cl-cd data-idx="11"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="12"> </cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="14"><span class="tGreen"></span></cl-cd>
<cl-cd data-idx="15">    <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1988547254"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="16">    <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e902755687.mp4"</span> autoplay loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="17">    <<span class="tDarkRed">img</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/Pic/81/bird7.gif"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="18">    <<span class="tDarkRed">img</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/Pic/81/bird7.gif"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="19">    <<span class="tDarkRed">img</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/Pic/81/bird3.gif"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="20"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="21"> </cl-cd>
<cl-cd data-idx="22"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="23">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="24">    <span class="tBlue">let</span> mState = () => aud.paused</cl-cd>
<cl-cd data-idx="25">        ? (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'paused'</span>), vid.pause())</cl-cd>
<cl-cd data-idx="26">        : (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'running'</span>), vid.play())</cl-cd>
<cl-cd data-idx="27">    ;</cl-cd>
<cl-cd data-idx="28">    aud.onpause = aud.onplaying = () => mState();</cl-cd>
<cl-cd data-idx="29">    vid.disablePictureInPicture = true;</cl-cd>
<cl-cd data-idx="30">    <span class="tBlue">let</span> pics = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'#papa > img'</span>);</cl-cd>
<cl-cd data-idx="31">    pics.forEach(pic => pic.onclick = () => aud.paused ? aud.play() : aud.pause());</cl-cd>
<cl-cd data-idx="32">})();</cl-cd>
<cl-cd data-idx="33"><<span class="tDarkRed">/script</span>></cl-cd>
<cl-cd data-idx="34"> </cl-cd>
</div>

小辣椒 发表于 2024-3-8 13:27

哇塞，真的黑科技来了{:4_178:}

小辣椒 发表于 2024-3-8 13:29

这个效果制作和上次The Box 播放器会晃动的图片一样的

小辣椒 发表于 2024-3-8 13:32

播放器效果加的像内规镜一样{:4_173:}

红影发表于 2024-3-8 15:15

这个天镜展示的还是倒影呢，把视频也装进去了，还有倒飞的鸟儿，这个漂亮{:4_199:}

红影发表于 2024-3-8 15:17

把那椭圆抓出来了，还让它能随鼠标放大以及色相变化，非常玄妙的制作{:4_199:}

三只鸟儿才是音乐的开关啊，有意思{:4_173:}

红影发表于 2024-3-8 15:18

加入那群白鸥，才让这倒影更有韵味了，黑黑的构思很巧妙{:4_199:}

红影发表于 2024-3-8 15:19

视频还能这样用，又是个新思路呢{:4_173:}

小文发表于 2024-3-8 15:20

漂亮得紧{:4_191:}！

樵歌发表于 2024-3-8 16:20

能倒映天地，法力无边{:4_173:}
特别那只鸟儿太逗了{:4_181:}

马黑黑 发表于 2024-3-8 17:16

樵歌发表于 2024-3-8 16:20
能倒映天地，法力无边
特别那只鸟儿太逗了

{:4_191:}

马黑黑 发表于 2024-3-8 17:16

小文发表于 2024-3-8 15:20
漂亮得紧！

感谢支持

马黑黑 发表于 2024-3-8 17:24

小辣椒发表于 2024-3-8 13:27
哇塞，真的黑科技来了
不黑呀

马黑黑 发表于 2024-3-8 17:24

小辣椒发表于 2024-3-8 13:32
播放器效果加的像内规镜一样

{:4_190:}

马黑黑 发表于 2024-3-8 17:25

红影发表于 2024-3-8 15:15
这个天镜展示的还是倒影呢，把视频也装进去了，还有倒飞的鸟儿，这个漂亮

感谢点评

马黑黑 发表于 2024-3-8 17:25

红影发表于 2024-3-8 15:19
视频还能这样用，又是个新思路呢

不是用过了吗

马黑黑 发表于 2024-3-8 17:27

红影发表于 2024-3-8 15:17
把那椭圆抓出来了，还让它能随鼠标放大以及色相变化，非常玄妙的制作

三只鸟儿才是音乐的开关 ...

这些，都只是用了CSS

冬天的雨 发表于 2024-3-8 17:31

音乐就点魔幻的，带着无限想象力{:4_178:}

冬天的雨 发表于 2024-3-8 17:32

先看看再说

页: [1] 2 3 4 5 6 7 8 9 10

查看完整版本: 天镜