源码小屋

花简静 · 发表于 2024-5-30 20:29

凡哥发表于 2024-5-30 20:26
克隆技术是令人惊叹的，但里面涉及到伦理、道德、法律等问题

这可不仅仅是代码克隆了。。。
生物克隆比较麻烦

凡哥 · 发表于 2024-5-30 21:24

花简静发表于 2024-5-30 20:29
这可不仅仅是代码克隆了。。。
生物克隆比较麻烦

代码克隆主要是讲究一下身份吧，没有生物克隆那么多事

凡哥 · 发表于 2024-5-31 08:27

2024年5月31日星期五

《Forever Young》

<style>

#tiezi { margin: 30px 0 30px calc(50% - 730px); display: grid; place-items: center; width: 1280px; height: 720px; background: #333 url('https://638183.freep.cn/638183/t24/2/61.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }

#tiezi::before, #tiezi::after { position: absolute; content: ''; width: 100%; height: 100%; border: 10px inset cyan; box-sizing: border-box; transition: 2s; }

#tiezi::before { left: 0; top: 0; border-color: cyan transparent transparent cyan; }

#tiezi::after { right: 0; bottom: 0; border-color: transparent cyan cyan transparent; }

#tiezi:hover::before, #tiezi:hover::after { width: 0; height: 0; }

#tiezi:hover .vid { mix-blend-mode: multiply; }

#player { position: absolute; bottom: 10px; }

#lrc { position: absolute; top: 18px; }

.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; pointer-events: none; }

</style>

</div>

var sF = document.createElement('script');

sF.charset = 'utf-8';

sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';

document.body.appendChild(sF);

var colors = {track: 'snow', prog: 'cyan', lrc1: 'white', lrc2: 'cyan'};

var lrcAr = [[2,"Various Artists - Forever Young", 6],[16.02,"Let dance in style",1.0],[17.06,"Let dance for a while",2.0],[19.06,"Heaven can wait",2.0],[21.02,"Were only watching the skies",2.0],[23.03,"Hoping for the best",1.1],[24.09,"But expecting the worst",1.9],[26.04,"Are you going to drop the bomb or not",2.5],[30.02,"Let us die young or let us live forever",3.1],[33.08,"We don't have the power",1.9],[35.01,"But we never say never",2.0],[37.03,"Sitting in a sandpit",1.0],[38.06,"Life is a short trip",2.9],[41.01,"The music for the sad men",1.5],[44.03,"Can you imagine when this race is won",3.0],[47.07,"Turn our golden faces into the sun",3.4],[51.02,"Praising our leaders",1.1],[52.09,"Were getting in tune",2.0],[54.06,"The music played by the madmen",3.4],[58.01,"Forever young I want to be forever young",4.9],[64.09,"Do you really want to live forever",3.4],[68.05,"Forever and ever",3.0],[71.1,"Forever young I want to be forever young",5.9],[79,"Do you really want to live forever",2.6],[84.01,"Forever young",2.7],[89.07,"Some are like water",2.0],[91.03,"Some are like the heat",2.0],[93.04,"Some are a melody and some are the beat",3.0],[96.09,"Sooner or later they all will be gone",3.9],[100.02,"Why dont they stay young",1.8],[103.08,"It so hard to get old without a cause",4.0],[107.05,"I dont want to perish like a fading horse",3.0],[110.09,"Youth like diamonds in the sun",3.3],[114.02,"And diamonds are forever",2.2],[117.08,"So many adventures couldn't happen today",3.4],[121.04,"So many songs we forgot to play",3.0],[124.09,"So many dreams swinging out of the blue",3.6],[128.04,"Well let them come true",3.0],[131.07,"Forever young I want to be forever young",5.6],[137.08,"Do you really want to live forever",5.0],[142.06,"Forever and ever",3.0],[145.06,"Forever young I want to be forever young",5.5],[151.1,"Do you really want to live forever",4.4],[156.07,"Forever and ever",2.8],[159.06,"Forever young I want to be forever young",6.7],[166.07,"Do you really want to live forever",5.8],[187.08,"Forever young I want to be forever young",5.9],[194.08,"Do you really want to live forever",3.3],[198.04,"Forever and ever",2.9],[201.07,"Forever young I want to be forever young",6.8],[208.1,"Do you really want to live forever",5.2],[215.09,"Forever young I want to be forever young",6.2],[222.08,"Do you really want to live forever",3.4],[226.09,"Forever young",3.1]];

</script>

花简静 · 发表于 2024-5-31 20:18

源码小屋里的知识多多。。
每天报个到

凡哥 · 发表于 2024-6-1 10:17

花简静发表于 2024-5-31 20:18
源码小屋里的知识多多。。
每天报个到

辛苦

凡哥 · 发表于 2024-6-1 10:19

2024年6月1日星期六

《异族之舞》

<style>

#tzbox { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 760px; border: thick groove cyan; overflow: hidden; box-sizing: border-box; position: relative; }

#tzbox::before { position: absolute; content: ''; inset: 0; background: url('https://638183.freep.cn/638183/t24/2/yzzw.jpg') no-repeat center/cover; animation: shake .2s infinite alternate var(--state); }

.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-dodge; }

.vid:nth-of-type(2) { width: 150px; height: 150px; right: 10px; top: 10px; border-radius: 50% 10%; box-shadow: 0 0 16px cyan; mix-blend-mode: unset; cursor: pointer; transition: .6s; }

.vid:nth-of-type(2):hover { transform: scale(1.1); }

@keyframes shake { to { inset: -20px; } }

</style>

</div>

(function() {

const vids = document.querySelectorAll('.vid');

var mState = () => {

tzbox.style.setProperty('--state', ['running','paused'][+aud.paused]);

vids.forEach(vid => aud.paused ? vid.pause() : vid.play());

};

aud.onplaying = aud.onpause = () => mState();

vids[1].onclick = () => aud.paused ? aud.play() : aud.pause();

tzbox.oncontextmenu = (e) => e.preventDefault();

})();

</script>

柠儿 · 发表于 2024-6-1 11:04

内容丰富的小屋，谢谢老师源码分享，辛苦了~

凡哥 · 发表于 2024-6-3 08:05

凡哥 · 发表于 2024-6-3 08:07

本帖最后由凡哥于 2024-6-3 09:52 编辑

2024年6月3日星期一

七色光

<style>

#mydiv { margin: 30px 0 30px calc(50% - 602px); width: 1024px; height: 700px; background: url('https://638183.freep.cn/638183/t24/2/qsg.jpg') no-repeat center/cover; border: thick inset orange; overflow: hidden; pointer-events: none; z-index: 1; position: relative; }

#mydiv::before, #mydiv::after { position: absolute; content: ''; width: 120px; height: 120px; background: inherit; border-radius: 50%; box-shadow: inset 0 0 80px green, 0 0 60px green; pointer-events: auto; cursor: pointer; transition: .75s; animation: rot 8s linear infinite var(--state); }

#mydiv::before { left: 20px; top: 20px; }

#mydiv::after { right: 5px; top: 5px; animation-delay: -3s; }

#mydiv:hover::before, #mydiv:hover::after { box-shadow: inset 0 0 60px green, 0 0 100px green; }

#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; }

.pic { position: absolute; offset-path: path('M-100 400 Q512 -80 1124 100'); animation: move 8s linear infinite var(--state); }

@keyframes move { to { offset-distance: 100%; } }

@keyframes rot { to { transform: rotate(360deg); } }

</style>

</div>

(function() {

Array.from({length: 7}).forEach((pic,key) => {

pic = new Image(100,88);

pic.src = 'https://638183.freep.cn/638183/t22/gif/ying1.gif';

pic.className = 'pic';

pic.style.cssText += `left: -100px; top: ${key * 30 + 30}px; animation-delay: -${Math.random() * 2 * key}s; filter: hue-rotate(${360 * Math.random()}deg); z-index: ${key + 2};`;

mydiv.appendChild(pic);

});

let mState = () => {

mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);

aud.paused ? vid.pause() : vid.play();

};

aud.onplaying = aud.onpause = () => mState();

mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

凡哥 · 发表于 2024-6-4 12:50

2024年6月4日星期二

知音

<style>

#mydiv { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height:720px; background: url('https://638183.freep.cn/638183/t24/2/viyb.jpg') no-repeat 0/cover; border: thick groove lightpink; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }

#mydiv:hover { background-size: 120%; background-position: center; }

.txtbox { position: absolute; display: grid; place-items: center; left: var(--x1); top: 20px; width: 50px; height: 50px; font: normal 30px sans-serif; text-align: center; color: white; box-sizing: border-box; cursor: pointer; }

.txtbox::after { position: absolute; content: ''; inset: -2px; border: 2px dashed gray; border-color: green lightgreen yellow orange; border-radius: 50%; box-shadow: inset 0 0 20px plum; transition: 1s; animation: rot 8s linear var(--delay) infinite var(--state); }

.txtbox:hover::after { box-shadow: inset 0 0 30px green, 0 0 60px white; }

#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }

@keyframes move1 { to { left: var(--x2); } }

@keyframes move2 { to { left: var(--x1); } }

@keyframes rot { to { transform: rotate(var(--deg)); } }

</style>

</div>

(function() {

const ar = '高山流水覓知音'.split('');

const ww = 1280, duTime = 16, deTime = 0.5;

const total = duTime + ar.length * deTime + deTime;

let sAr = [], step = 0;//, aniName = 'move1';

ar.forEach((t,k) => {

let span = document.createElement('span');

span.className = 'txtbox';

span.textContent = t;

span.style.cssText += `

--x1: ${ww + k * 60 - ar.length * 60 - 20}px;

--x2: ${k * 60 + 10}px;

--deg: -1turn;

--delay: -${Math.random() * k}s;

`;

sAr.push(span);

mydiv.appendChild(span);

});

let playAni = () => {

let aniName = ['move1','move2'][step % 2];

let deg = ['-1turn','1turn'][step % 2];

sAr.forEach((item,key) => {

item.style.left = ['var(--x1)','var(--x2)'][step % 2];

item.style.setProperty('--deg', deg);

let delay = step % 2 > 0 ? deTime * (sAr.length - key - 1) : deTime * key;

item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards var(--state)`;

});

step ++;

};

let mState = () => {

mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);

sAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);

aud.paused ? vid.pause() : vid.play();

};

aud.loop = false;

aud.onplaying = aud.onpause = () => mState();

aud.onended = () => { step = 0; aud.play(); }

aud.ontimeupdate = () => { if(aud.currentTime >= total * step) playAni(); };

sAr.forEach(item => item.onclick = () =>aud.paused ? aud.play(): aud.pause());

})();

</script>

[碎语] 源码小屋

2024年5月31日星期五

《Forever Young》

评分

评分

2024年6月1日星期六

《异族之舞》

2024年6月3日星期一

七色光

评分

2024年6月4日星期二

知音

评分

一叶知秋

版主勋章

山高为峰

山外有山

樱果相依

24

46

47

48

闲花落

一生安柠

青恬时光

幸福莓满

心想事橙

桃气满满

梅开颜笑

心若葡提

大吉大荔

喜上莓梢

一坛酒

江湖之上

桃花朵朵

猪事顺利

菜源滚滚

银狐狸

[碎语] 源码小屋

2024年5月31日 星期五

《Forever Young》

评分

评分

2024年6月1日 星期六

《异族之舞》

2024年6月3日 星期一

七色光

评分

2024年6月4日 星期二

知音

评分

一叶知秋

版主勋章

山高为峰

山外有山

樱果相依

24

46

47

48

闲花落

一生安柠

青恬时光

幸福莓满

心想事橙

桃气满满

梅开颜笑

心若葡提

大吉大荔

喜上莓梢

一坛酒

江湖之上

桃花朵朵

猪事顺利

菜源滚滚

银狐狸

2024年5月31日星期五

2024年6月1日星期六

2024年6月3日星期一

2024年6月4日星期二