《祥和安康中国年》-- 烟圈蔓延（再试黑黑老师《梦幻的世界》代码）
<style>#papa {
margin: 50px 0 0 calc(50% - 681px);
width: 1200px;
height: 700px;
border: 6px solid rgba(36, 201, 219,.95);
border-radius: 20px;
background: url('https://bpic.51yuansu.com/pic3/cover/03/03/70/5af557197d049_610.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1;
display: grid;
place-items: center;
}
#papa img { position: absolute; cursor: pointer; mix-blend-mode: multiply; transform-origin: 100% 0; animation: swear 0s infinite alternate var(--state); }
#papa img:nth-of-type(1) { top: 10px; left: 140px; }
#papa img:nth-of-type(2) { top: 0; right: 0; }
#papa::before {
position: absolute;
content: '';
inset: 0 0 0 0;
background: url('https://img-qn-3.51miz.com/preview/element/00/01/15/00/E-1150036-9079BCCB.jpg') no-repeat center/cover;
opacity: .9;
transition: opacity .75s;
-webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzA3MTk1MDE0MTAzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDExMjIgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjkzNDkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjE5LjE0MDYyNSIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik05NTAuNDg5ODcyIDY2NC40Nzc5NTdjNTQuODYwMjU1LTE2Ljc2NTI3NyAxMTMuMjM5MTQ5LTQzLjkwMTI3NyAxNDYuMjc5NDktMTAyLjYwNjk3OCAxNi44MTk3NDUtMjkuMDUzMjc3IDMzLjA1MTIzNC03OS43MzAzODMgMTIuOTYzNDA0LTE0NC42ODkwMjItMTEuNDM4Mjk4LTQ1LjU1NzEwNi0xMTEuMzAwMDg1LTE5OC40MjcyMzQtMzQ5LjgwNDkzNi0xMjIuNjgzOTE0IDQuMzkwMTI4LTEwNS4xMjM0MDQtMzcuMTAzNjYtMjE3LjA0NDQyNi0xMjUuMTM0OTc5LTI2MS45OTE0OUM1ODEuMzkyMzQgMi45MTk0ODkgNTE2LjcwNjA0MyAzLjE4MDkzNiA0NTYuNTk1MDY0IDMzLjU3NDEyOGMwIDAtMTIwLjYxNDEyOCA1OS41NzcxOTEtMTE0LjIzMDQ2OCAyNjcuNzY1MTA2LTM2LjUwNDUxMS0xMS45NjExOTEtNzQuOTM3MTkxLTIxLjAwMjg5NC0xMTQuMDM0MzgzLTIwLjQwMzc0NS03OC4yNTk3NDUtMy4zMzM0NDctMTc0LjUzNzUzMiAzNS4zNzE1NzQtMjEwLjUwODI1NiAxMTcuODI1MzYyIDAgMC0zNy4yMzQzODMgODMuMzc5NzQ1IDIxLjkzOTc0NSAxNzMuNzUzMTkyIDAgMCA1NC4xOTU3NDUgODEuMTkwMTI4IDIwMi41OTk0ODkgMTIxLjE0NzkxNC00MC4wMjMxNDkgODEuNzIzOTE1LTQ4LjE0OTc4NyAxNTIuMTQwMjU1LTI0LjY3NDA0MiAyMTMuNTE0ODk0IDIxLjk1MDYzOCA1OC4wNTIwODUgNzMuOTQ1ODcyIDk4LjA4NjEyOCAxNDIuNjMwMTI4IDExMC4wNDczMTkgMCAwIDEzOS40OTI3NjYgMjYuMDY4NDI2IDI0NC43NDY4OTMtMTM5LjM3MjkzNiA0NS4wODg2ODEgNjUuODMwMTI4IDExNC42MzM1MzIgMTM3LjExNzk1NyAyMjUuNDc2MDg1IDE0NC40Mjc1NzUgMCAwIDExMS4xNjkzNjIgNi45ODI4MDkgMTYxLjExNjU5Ni04Ni4xMDMxNDkgNDEuMjg2ODA5LTc3LjQxMDA0MyAzMC4xMDk5NTctMTY5LjEwMTYxNy00MS4xNzc4NzItMjcxLjcwODU5NiIgZmlsbD0iIzIzMTkxNiIgcC1pZD0iOTM1MCI+PC9wYXRoPjxwYXRoIGQ9Ik02OTEuMDE0ODA5IDIzNy4zMTc0NDdjNi4xMjIyMTMgNDQuMTUxODMtMC40MDMwNjQgODguNzA2NzIzIDAuNzk1MjM0IDEzMy4xMiAzLjY2MDI1NSA2LjI1MjkzNiAxMC41NjY4MDkgMTEuNTY5MDIxIDE3LjYyNTg3MiAxMS4wMzUyMzQgNjMuNjI5NjE3LTIwLjAxMTU3NCAxMjguNjUzNjE3LTQ3LjI3ODI5OCAxOTUuMjEzNjE3LTQxLjY4OTg3MiA2My45MDE5NTcgNC4zOTAxMjggMTI0LjAwMjA0MyAzNi45MDc1NzQgMTQ4Ljc0MTQ0NyA5NS4zNTE4MjkgOC45NzYzNCAzMC4zOTMxOTEgMTAuNDM2MDg1IDYzLjIzNzQ0Ny02LjUxNDM4MyA5Mi40MzIzNDEtMzUuNTc4NTUzIDYyLjk2NTEwNi0xMjQuMTQzNjYgNzYuNDA3ODMtMTg2LjU3NDk3OSA5Mi44ODk4NzItNy4zMDk2MTcgNC4yNTk0MDQtMTIuOTYzNDA0IDEyLjAzNzQ0Ny0xMy4wMjg3NjYgMjAuNzUyMzQgMTMuMzU1NTc0IDI5LjExODYzOCAzOS42OTYzNCA0Ni4wMTQ2MzggNTcuMzExMzE5IDcxLjU0OTI3NyA0MC40OTE1NzQgNjAuOTA2MjEzIDY5LjQxNDEyOCAxMzIuNTIwODUxIDMzLjU3NDEyOCAxOTkuMzUzMTkyLTE3Ljg4NzMxOSAzNC44Mzc3ODctNjAuOTcxNTc0IDQ5LjI3MTgzLTk3LjU0MTQ0NyA1MC4yNjMxNDktMTA3LjkxMjE3LTYuOTcxOTE1LTE2OC4wMjMxNDktOTYuMjEyNDI2LTIxNi4zNTgxMjgtMTgyLjMyNjQ2OS01LjY1Mzc4Ny04Ljg0NTYxNy0xOC44Nzg2MzgtNy41MTY1OTYtMjYuOTk0MzgzLTkuMzY4NTEtMjAuNjEwNzIzIDExLjQzODI5OC0yOC4xMjczMTkgMzMuMjM2NDI2LTM3LjEwMzY1OSA1My42NTEwNjQtMzYuMzczNzg3IDY4LjQyMjgwOS0xMDUuMjU0MTI4IDE0MC4zNzUxNDktMTkxLjg5MTA2NCAxMzMuOTI2MTI3LTM5LjYzMDk3OS02LjkxNzQ0Ny03Ni41Mjc2Ni0yNy41MjgxNy05MS44ODc2Ni02Ny45NjUyNzYtMjYuNjAyMjEzLTY5LjgxNzE5MSAxNC4zNTc3ODctMTU0LjI1MzYxNyA1MS40NjE0NDctMjEzLjc3NjM0MSA0LjI0ODUxMS02LjMxODI5OCAxLjM5NDM4My0xMi4zMDk3ODcgMS40NTk3NDUtMTguMTQ4NzY2LTYuMTg3NTc0LTE4LjY5MzQ0Ny0yOS41ODcwNjQtMTguOTU0ODk0LTQ1LjM1MDEyOC0yMS41NDc1NzQtNzMuNDAxMTkxLTE2LjQ5MjkzNi0xNDkuNzk4MTI4LTQ2Ljg3NTIzNC0xOTYuMjE1ODMtMTAxLjk0MjQ2OC0yMS44MDkwMjEtMzMuMTE2NTk2LTI5LjUyMTcwMi03Mi44NzgyOTgtMTYuNTU4Mjk3LTExMC40Mzk0OSAyMy42ODI3MjMtNTQuMjYxMTA2IDk0LjY4NzMxOS04MS41Mjc4MyAxNTAuMTQ2NzIzLTc3Ljg2NzU3NCA1Ni4wNDc2Ni0xLjE5ODI5OCAxMTguMjgyODk0IDI1LjEzMTU3NCAxNzEuNzQ4NzY2IDQ1LjY3NjkzNiA3Ljg0MzQwNC0wLjI2MTQ0NyAxNi43NTQzODMtNS45OTE0ODkgMjAuODcyMTctMTIuMjk4ODk0IDEuMjYzNjYtMzcuNzAyODA5LTcuNjQ3MzE5LTczLjk0NTg3Mi02LjM4MzY1OS0xMTEuNzE0MDQyIDMuMzg3OTE1LTY2LjIzMzE5MSAyMS4yNzUyMzQtMTQzLjA5ODU1MyA3OC41OTc0NDYtMTgxLjkyMzQwNCAzNy45NjQyNTUtMTkuMDIwMjU1IDgwLjMxODYzOC0yMy4wMDczMTkgMTE3Ljc2LTEuMTk4Mjk4IDU0LjkwMzgzIDI3Ljc4OTYxNyA3OS4xMjAzNCA5NS44MjAyNTUgODcuMDk0NDY5IDE1Mi4yMDU2MTciIGZpbGw9IiNFRTkwQjIiIHAtaWQ9IjkzNTEiPjwvcGF0aD48cGF0aCBkPSJNNTMxLjU3NTgzIDUxOS45MTk2NkM1MTAuMzY1OTU3IDQ3My40MzY1OTYgNDk0Ljg3NTIzNCAyODYuMTIwODUxIDU1NC44NDQ1OTYgMjg0LjMyMzQwNGM1OS44NDk1MzItMS45MjgxNyA1Ny44NDUxMDYgMTk3LjAzMjg1MSA1NS44NjI0NjggMjIwLjE2IDQyLjYxNTgzLTIzLjEyNzE0OSAxOTguOTM5MjM0LTY5LjYxMDIxMyAyMTguMTU1NTc0LTE3LjQwOCAxOS4zNDcwNjQgNTIuMDYwNTk2LTEyMy40NzkxNDkgOTQuNTU2NTk2LTE5NC44ODY4MDggNzUuMTk4NjM5IDM0LjcwNzA2NCAxOS4zNDcwNjQgMTgzLjM4MzE0OSAxMzUuMTg5Nzg3IDEzNS4xMDI2MzggMTc1LjY4MTM2MS0zMi4wNDkwMjEgMjYuOTI5MDIxLTE2Mi4xNjIzODMtNDguMjY5NjE3LTE4NS4zNzY2ODEtMTMxLjI2ODA4NS01Ljc3MzYxNyA2MS43Nzc3MDItMTA3LjA0MDY4MSAxNzcuMjgyNzIzLTE1MC41MjggMTUwLjQ4NDQyNi0zNC43NzI0MjYtMjEuMDEzNzg3IDQ0LjQxMzI3Ny0xMzYuOTc2MzQgOTAuNzU0NzI0LTE3MS44MjUwMjItODEuMTEzODcyIDE5LjQ4ODY4MS0xOTYuNzM4NzIzLTI5LjcxNzc4Ny0xODkuMjIyMTI4LTU5LjcwNzkxNCA5LjYyOTk1Ny0zOC41NjM0MDQgMTM4Ljg5MzYxNy0yOS4xMjk1MzIgMTk2Ljg2OTQ0Ny01LjcxOTE0OSIgZmlsbD0iI0ZFRkVGRSIgcC1pZD0iOTM1MiI+PC9wYXRoPjwvc3ZnPg==') no-repeat center;
-webkit-mask-size: 0%;
animation: chgMask 10s cubic-bezier(.17,.67,.87,.27) infinite alternate var(--state);
}
#papa:hover::before { opacity: unset; }
#mypic {
position: absolute;
top: 0px;
left: 0px;
width: 1200px;
cursor: pointer;
transition: 1s;
animation: rot 6s infinite linear var(--state);
}
#mypic:hover { filter: hue-rotate(240deg); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes chgMask { 20% { -webkit-mask-size: 0; } 100% { -webkit-mask-size: 400%; } }
#vid { position: absolute; width: 100%; height: 110%; top:-10%; object-fit: cover; pointer-events: none;opacity: .3;z-index: -1; transition: 0.1s all ease;}
</style>
<div id="papa">
<img src="https://z4a.net/images/2024/02/09/lonniandaji.gif" alt="" />
<img src="" alt="" />
<img id="mypic" src="" alt="" />
<video id="vid"src="https://img3.tukuppt.com/video_show/2422006/00/02/12/5b51e93775b06.mp4" muted autoplay loop></video>
<audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/fc/24/01/19/24011916401321824547.mp3" autoplay loop></audio>
</div>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/lrc-ysj.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#mypic',
lrc_css: (`bottom: 40px; color: rgba(255,255,255,.9); --bg: url('https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg'); font-size: 2.4em;`)
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
{:5_150:}{:5_150:}{:5_150:} 欣赏亦是金老师的精彩贺帖{:5_146:} liumang 发表于 2024-2-9 16:43
问好管理，祝你新年快乐！{:5_116:} liumang 发表于 2024-2-9 16:45
欣赏亦是金老师的精彩贺帖
谢谢欣赏{:5_124:}
页:
[1]