查看: 2187|回复: 103

[单图] 【黑师代码】美好时光(赠:雨声、清梦)

[复制链接]
发表于 2024-2-25 20:52 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-2-25 21:02 编辑







评分

7

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-2-25 21:03 | 显示全部楼层
本帖最后由 花简静 于 2024-2-25 21:13 编辑

<style>     #papa { margin: 130px 0 0 calc(50% - 931px); width: 1700px; height: 900px; background: #666 url('https://pic.imgdb.cn/item/657acc2ac458853aef748ce0.jpg') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }     #player { width: 500px; height: 500px;top:-180px;left:105px;cursor: pointer; background: url('http://qhxy.52qingyin.cn/file/20231213151247_28361.svg') no-repeat center/cover; filter: brightness(200%) opacity(.9); animation: rotating 22s linear infinite var(--state); position: relative; }     #player::before, #player::after { position: absolute; content: ''; width: 100%; height: 100%; background: inherit; transform: rotate(240deg); filter: invert(80%) opacity(.9); }     #player::after { transform: rotate(120deg); filter: invert(100%) opacity(.9); }    
    @keyframes rotating { to { transform: rotate(-360deg); } } #vid {     position: absolute;     width: 120%;     height: 100%;     right:-300px;
    object-fit: cover;     pointer-events: none;     mix-blend-mode: screen;     z-index:3;     opacity: .30; } lz-3d {     position: absolute;     left: calc(56% - 5px);     top: calc(30% - 5px);     width: 13px;     height: 13px;     border-radius: 50%; opacity: .66;     background: gray;     transform: perspective(200px) rotate(var(--deg)) translate3d(var(--xx), var(--yy), var(--zz));     animation: o2C var(--du) var(--delay) infinite linear var(--state); } @keyframes o2C {     to { transform: perspective(200px) rotate(0) translate3d(0,0,0); } } </style>
<div id="papa"> <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/01/63/5b472f92d774b.mp4" autoplay="" loop="" muted=""></video>     <div id="player" title="播放/暂停"></div>     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29470947.mp3" autoplay loop></audio> </div>
<script> let total = 200, ww = papa.offsetWidth, hh = papa.offsetHeight;
let script = document.createElement('script'); script.charset = 'utf-8'; script.src = 'https://638183.freep.cn/638183/web/api/simpleplayer.js'; document.body.appendChild(script);
let loadJs = (url,callback) => {     let body = document.querySelector('body'), jsNode = document.createElement('script');     jsNode.charset = 'utf-8';     jsNode.setAttribute('src', url);     body.appendChild(jsNode);     jsNode.onload = () => callback(); };

Array.from({length: total}).forEach( (item,key) => {     item = document.createElement('lz-3d');     item.style.cssText += `         background: #${Math.random().toString(16).substr(-6)};         --xx: ${Math.random() * ww * .75}px;         --yy: ${Math.random() * hh * .75}px;         --zz: ${100 + Math.random() * 100}px;         --deg: ${360 + Math.random() * 360}deg;         --du: ${15 + Math.random() * 15}s;         --delay: ${Math.random() * -15}s;     `;     papa.appendChild(item); });
let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放'); let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running'); aud.addEventListener('playing',mState,false); aud.addEventListener('pause',mState,false); player.addEventListener('click',playMusic,false); setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100); </script> <Br><Br><Br><Br><Br><Br>

评分

4

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-2-25 21:03 | 显示全部楼层
点评
回复

使用道具

发表于 2024-2-25 21:03 | 显示全部楼层
静妞我没听到音乐呢
点评
回复

使用道具

发表于 2024-2-25 21:04 | 显示全部楼层
我滴妈,一刷新不但音乐出来了,画面还这么好看
点评
回复

使用道具

发表于 2024-2-25 21:05 | 显示全部楼层
静妞这是大制作啊,太炫酷了,我喜欢!
点评
回复

使用道具

 楼主| 发表于 2024-2-25 21:06 | 显示全部楼层
@雨声 @清梦
亲爱的雨声,感觉好几天没跟你聊天了。。
上班忙起来了,单位电脑开这个千山还是不行。。
所以白天都来不了。
手边事情多,我做得又慢,近来重感冒,也有点影响。。。
哎。。真想找个时间好好跟你聊个天哪。。。



清梦:看到你近来发了不少代码贴子。图片做得漂亮,意境超好。。。
代码用得太熟了,真不像刚开始用的。。
好期待看到你更多的作品呀。。。
最近你们在这里比较多,这样的坚守让我觉得十分暖心。。

再说一句,有两位妞,真好。。抱个。。

评分

3

查看全部评分

点评
回复

使用道具

发表于 2024-2-25 21:07 | 显示全部楼层
有穿越时空的感觉,
我最近看穿越小说有点痴迷了,
咋感觉我就要穿越了呢。
点评
回复

使用道具

 楼主| 发表于 2024-2-25 21:07 | 显示全部楼层
雨声 发表于 2024-2-25 21:03
静妞我没听到音乐呢

我能听见呀。。。正常播放。。
点评
回复

使用道具

 楼主| 发表于 2024-2-25 21:08 | 显示全部楼层
雨声 发表于 2024-2-25 21:04
我滴妈,一刷新不但音乐出来了,画面还这么好看

本来发一个新图,单依纯的歌,很好听的。。。
结果不知为啥整个画面不动。。只好换了。。
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-9 20:40

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表