《今年又是好兆头》-- 星月组合（试帖黑黑老师《梦幻的世界》代码）
本帖最后由 亦是金 于 2024-2-6 16:58 编辑 <br /><br /><style>#papa {
margin: 80px 0 0 calc(50% - 681px);
width: 1200px;
height: 700px;
border: 6px solid rgba(36, 201, 219,.95);
border-radius: 20px;
background: url('https://s4.ax1x.com/2022/02/19/HbL9l8.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1;
display: grid;
place-items: center;
}
#papa::before {
position: absolute;
content: '';
inset: 0 0 0 0;
background: url('https://s4.ax1x.com/2022/02/19/HbLpSf.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: 550px;
left: 120px;
width: 150px;
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%; } }
.zipic { position: absolute; right: 0;transform: skew(0deg,4deg);transform-origin: 10px 10px; }
/*变换：偏斜（-13deg）；变换原点：右 中心；*/
.zipic:nth-of-type(1) { left: 420px; top: 100px;animation: skew1 3sinfinite linear;width: 0px; height: 220px;}
.zipic:nth-of-type(2) { top: 50px; right: 850px; animation: skew2 6sinfinite linear;width: 0px; height: 220px; }
.zipic:nth-of-type(3) { left: -10px; top: 5px;animation: skew3 3sinfinite linear;width: 340px; height: 200px;}
.stop .zipic:nth-of-type(1){animation-play-state: paused;}
.stop .zipic:nth-of-type(2){animation-play-state: paused;}
.stop .zipic:nth-of-type(3){animation-play-state: paused;}
@keyframes skew1 { 50%{ transform: skew(3deg); } }
@keyframes skew2 { 50%{ transform: skew(3deg); } }
@keyframes skew3 { 50%{ transform: skew(3deg); } }/*关键帧 偏斜3｛50%｛变换：偏斜（3deg）；*/
.xipic { position: absolute; bottom: 0;transform: skew(-3deg);transform-origin: bottom center;}
.xipic:nth-of-type(4) { left: 220px; bottom: -20px; animation: skew4 3sinfinite linear;width: 0px; height: 320px;}
.xipic:nth-of-type(5) { left: 990px; animation: skew5 6sinfinite linear; width: 0px; height: 350px; }
.xipic:nth-of-type(6) { left: 120px; bottom: 0px; animation: skew6 8sinfinite linear;width: 0px; height: 420px;}
.stop .xipic:nth-of-type(4){animation-play-state: paused;}
.stop .xipic:nth-of-type(5){animation-play-state: paused;}
.stop .xipic:nth-of-type(6){animation-play-state: paused;}
@keyframes skew4 { 50%{ transform: skew(3deg); } }
@keyframes skew5 { 50%{ transform: skew(3deg); } }
@keyframes skew6 { 50%{ transform: skew(3deg); } }
.yipic { position: absolute; right: 0;transform: skew(12deg,0deg);transform-origin: top right; }
/*变换：偏斜（-13deg）；变换原点：右上角；*/
.yipic:nth-of-type(7) { left: 20px; right: 0px;animation: skew7 3sinfinite linear;width: 0px; height: 220px;}
.yipic:nth-of-type(8) { top: 50px; right: 850px; animation: skew8 6sinfinite linear;width: 0px; height: 220px; }
.yipic:nth-of-type(9) {right: 0px; top: 5px; animation: skew9 3sinfinite linear;width: 300px; height: 200px;}
.stop .yipic:nth-of-type(7){animation-play-state: paused;}
.stop .yipic:nth-of-type(8){animation-play-state: paused;}
.stop .yipic:nth-of-type(9){animation-play-state: paused;}
@keyframes skew7 { 50%{ transform: skew(3deg); } }
@keyframes skew8 { 50%{ transform: skew(3deg); } }
@keyframes skew9 { 50%{ transform: skew(3deg); } }/*关键帧 偏斜3｛50%｛变换：偏斜（3deg）；*/
#vid { position: absolute; width: 100%; height: 110%; top:-10%; object-fit: cover; pointer-events: none;opacity: .2;z-index: -1; transition: 0.1s all ease;}
</style>
<div id="papa">
<img id="mypic" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzA3MTkxODkxNTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2NzEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgzMy44IDI5Mi42bS0yOS4zIDBhMjkuMyAyOS4zIDAgMSAwIDU4LjYgMCAyOS4zIDI5LjMgMCAxIDAtNTguNiAwWiIgZmlsbD0iI0YyQkMzNiIgcC1pZD0iMjY3MiI+PC9wYXRoPjxwYXRoIGQ9Ik03NjIuNCAyNzcuMWMtOC4xIDAtMTQuNi02LjYtMTQuNi0xNC42IDAtOC4xIDYuNi0xNC42IDE0LjYtMTQuNnMxNC42IDYuNiAxNC42IDE0LjZjMCA4LjEtNi41IDE0LjYtMTQuNiAxNC42ek04MzMuOCAzMjEuOGMtMTYuMSAwLTI5LjMtMTMuMS0yOS4zLTI5LjMgMC0xNi4xIDEzLjEtMjkuMyAyOS4zLTI5LjMgMTYuMSAwIDI5LjMgMTMuMSAyOS4zIDI5LjMgMCAxNi4yLTEzLjEgMjkuMy0yOS4zIDI5LjN6IG0wLTQ5LjdjLTExLjMgMC0yMC41IDkuMi0yMC41IDIwLjVzOS4yIDIwLjUgMjAuNSAyMC41IDIwLjUtOS4yIDIwLjUtMjAuNS05LjItMjAuNS0yMC41LTIwLjV6IiBmaWxsPSIjNDcxQTFBIiBwLWlkPSIyNjczIj48L3BhdGg+PHBhdGggZD0iTTg1NS42IDQ3MmMwLTc2LjUtNjItMTM4LjUtMTM4LjUtMTM4LjUtMjMuMSAwLTQ0LjkgNS43LTY0LjEgMTUuNyAwLjEtMiAwLjEtNCAwLjEtNiAwLTc2LjUtNjItMTM4LjUtMTM4LjUtMTM4LjVzLTEzOC41IDYyLTEzOC41IDEzOC41YzAgMi4yIDAgNC4zIDAuMSA2LjQtMTkuNC0xMC4zLTQxLjUtMTYuMi02NS0xNi4yLTc2LjUgMC0xMzguNSA2Mi0xMzguNSAxMzguNSAwIDYzLjQgNDIuNiAxMTYuOCAxMDAuNyAxMzMuMi0xMS45IDIwLjUtMTguOCA0NC4yLTE4LjggNjkuNiAwIDc2LjUgNjIgMTM4LjUgMTM4LjUgMTM4LjUgNTIgMCA5Ny4yLTI4LjcgMTIwLjktNzEgMjMuNyA0Mi40IDY5IDcxIDEyMC45IDcxIDc2LjUgMCAxMzguNS02MiAxMzguNS0xMzguNSAwLTI1LjQtNi45LTQ5LjItMTguOC02OS42IDU4LjQtMTYuMyAxMDEtNjkuNyAxMDEtMTMzLjF6IiBmaWxsPSIjRkYyOTI5IiBwLWlkPSIyNjc0Ij48L3BhdGg+PHBhdGggZD0iTTYzNS4yIDgxOC41Yy00OSAwLTk0LjYtMjUuMi0xMjAuOS02Ni4yLTI2LjMgNDEtNzEuOSA2Ni4yLTEyMC45IDY2LjItNzkuMiAwLTE0My42LTY0LjQtMTQzLjYtMTQzLjYgMC0yMy4yIDUuNy00Ni4xIDE2LjQtNjYuNkMyMDggNTg5IDE2Ny45IDUzMy44IDE2Ny45IDQ3MmMwLTc5LjIgNjQuNC0xNDMuNiAxNDMuNi0xNDMuNiAyMC42IDAgNDEuMSA0LjUgNTkuNyAxMyAxLTc4LjMgNjUtMTQxLjcgMTQzLjYtMTQxLjcgNzguNCAwIDE0Mi40IDYzLjIgMTQzLjYgMTQxLjQgMTguNC04LjMgMzguNi0xMi42IDU4LjgtMTIuNiA3OS4yIDAgMTQzLjYgNjQuNCAxNDMuNiAxNDMuNiAwIDYxLjgtNDAuMSAxMTYuOS05OC4zIDEzNi4zIDEwLjcgMjAuNSAxNi40IDQzLjQgMTYuNCA2Ni42LTAuMSA3OS4xLTY0LjYgMTQzLjUtMTQzLjcgMTQzLjV6IG0tMTIxLTg2LjZsNC41IDhjMjMuNiA0Mi4yIDY4LjIgNjguNCAxMTYuNSA2OC40IDczLjUgMCAxMzMuNC01OS44IDEzMy40LTEzMy40IDAtMjMuNi02LjMtNDYuNy0xOC4xLTY3LjFsLTMuMy01LjcgNi40LTEuOGM1Ny4xLTE2LjIgOTctNjguOSA5Ny0xMjguMyAwLTczLjUtNTkuOC0xMzMuNC0xMzMuNC0xMzMuNC0yMS43IDAtNDIuNSA1LjEtNjEuNyAxNS4xbC03LjggNC4xIDAuMy04LjhjMC4xLTEuOSAwLjEtMy45IDAuMS01LjggMC03My41LTU5LjgtMTMzLjQtMTMzLjQtMTMzLjQtNzMuNSAwLTEzMy40IDU5LjgtMTMzLjQgMTMzLjQgMCAyLjEgMCA0LjEgMC4xIDYuMmwwLjQgOS04LTQuMmMtMTkuMi0xMC4yLTQwLjgtMTUuNi02Mi42LTE1LjYtNzMuNCAwLjEtMTMzLjIgNTkuOS0xMzMuMiAxMzMuNCAwIDU5LjQgMzkuOSAxMTIuMiA5NyAxMjguM2w2LjQgMS44LTMuMyA1LjdjLTExLjggMjAuMy0xOC4xIDQzLjUtMTguMSA2Ny4xIDAgNzMuNSA1OS44IDEzMy40IDEzMy40IDEzMy40IDQ4LjMgMCA5Mi45LTI2LjIgMTE2LjUtNjguNGw0LjMtOHoiIGZpbGw9IiM0NzFBMUEiIHAtaWQ9IjI2NzUiPjwvcGF0aD48cGF0aCBkPSJNNTI5LjUgMzM4LjNjMC04LjYtNy0xNS42LTE1LjYtMTUuNnMtMTUuNyA3LTE1LjcgMTUuNmMwIDcgNC42IDEyLjkgMTAuOCAxNC45djEwMS45aDkuNlYzNTMuMmM2LjQtMiAxMC45LTcuOSAxMC45LTE0Ljl6TTUzOC40IDM4NC44bC05LjMgNjguNyA5LjUgMS4zIDkuMy02OC42YzYuNS0xLjIgMTEuOC02LjQgMTIuNy0xMy4zIDEuMi04LjYtNC44LTE2LjQtMTMuNC0xNy42LTguNi0xLjItMTYuNCA0LjgtMTcuNiAxMy40LTAuOSA2LjggMi44IDEzLjMgOC44IDE2LjF6TTQ4OS40IDM4NC44bDkuMyA2OC43LTkuNiAxLjMtOS4zLTY4LjZjLTYuNS0xLjItMTEuOC02LjQtMTIuNy0xMy4zLTEuMi04LjYgNC44LTE2LjQgMTMuNC0xNy42czE2LjQgNC44IDE3LjYgMTMuNGMwLjkgNi44LTIuOCAxMy4zLTguNyAxNi4xek02OTIuNyA0OTkuMmM4LjQtMS44IDEzLjgtMTAuMSAxMi4xLTE4LjZhMTUuNjYgMTUuNjYgMCAwIDAtMTguNi0xMi4xYy02LjggMS40LTExLjYgNy4xLTEyLjMgMTMuN2wtOTkuNyAyMS4yIDIgOS40IDk5LjctMjEuMmMzLjMgNS44IDEwIDkgMTYuOCA3LjZ6TTY0OS4xIDUxNy41bC02OS4xIDUuMiAwLjcgOS42IDY5LjEtNS4yYzIuNSA2LjEgOC43IDEwLjIgMTUuNyA5LjcgOC42LTAuNiAxNS4xLTguMiAxNC40LTE2LjgtMC42LTguNi04LjItMTUuMS0xNi44LTE0LjQtNi45IDAuNS0xMi40IDUuNS0xNCAxMS45ek02MzguOSA0NjkuNWwtNjUuMiAyMy4zLTMuMi05LjEgNjUuMi0yMy4zYy0wLjItNi42IDMuOC0xMi45IDEwLjQtMTUuMiA4LjEtMi45IDE3LjEgMS4zIDIwIDkuNSAyLjkgOC4xLTEuMyAxNy4xLTkuNSAyMC02LjYgMi40LTEzLjcgMC4xLTE3LjctNS4yek02MDIuMSA2NzcuMmM0LjcgNy4zIDE0LjQgOS4zIDIxLjcgNC42IDcuMi00LjcgOS4zLTE0LjQgNC42LTIxLjctMy44LTUuOC0xMC44LTguMy0xNy4yLTYuNmwtNTUuNi04NS40LTguMSA1LjIgNTUuNiA4NS40Yy00LjIgNS4zLTQuOCAxMi43LTEgMTguNXpNNTY5LjQgNjQzLjFsLTI5LjYtNjIuNi04LjcgNC4xIDI5LjYgNjIuNmMtNC44IDQuNS02LjQgMTEuOC0zLjQgMTguMSAzLjcgNy44IDEzIDExLjEgMjAuOCA3LjQgNy44LTMuNyAxMS4xLTEzIDcuNC0yMC44LTIuOS02LjMtOS42LTkuNi0xNi4xLTguOHpNNjEwLjUgNjE2LjRsLTQ1LjItNTIuNSA3LjMtNi4zIDQ1LjIgNTIuNWM2LjEtMi42IDEzLjQtMS4xIDE3LjkgNC4yIDUuNiA2LjYgNC45IDE2LjQtMS42IDIyLjEtNi42IDUuNi0xNi40IDQuOS0yMi4xLTEuNi00LjYtNS4zLTUtMTIuOC0xLjUtMTguNHpNNDI0IDY3Ny4yYy00LjcgNy4zLTE0LjQgOS4zLTIxLjYgNC42LTcuMy00LjctOS4zLTE0LjQtNC42LTIxLjcgMy44LTUuOCAxMC44LTguMyAxNy4yLTYuNmw1NS41LTg1LjQgOC4xIDUuMi01NS42IDg1LjRjNC4yIDUuMyA0LjggMTIuNyAxIDE4LjV6TTQ1Ni44IDY0My4xbDI5LjYtNjIuNiA4LjcgNC4xLTI5LjYgNjIuNmM0LjggNC41IDYuNCAxMS44IDMuNCAxOC4xLTMuNyA3LjgtMTMgMTEuMS0yMC44IDcuNC03LjgtMy43LTExLjEtMTMtNy40LTIwLjggMi45LTYuMyA5LjUtOS42IDE2LjEtOC44ek00MTUuNyA2MTYuNGw0NS4yLTUyLjUtNy4zLTYuMy00NS4yIDUyLjVjLTYuMS0yLjYtMTMuNC0xLjEtMTcuOSA0LjItNS42IDYuNi00LjkgMTYuNCAxLjYgMjIuMSA2LjYgNS42IDE2LjQgNC45IDIyLjEtMS42IDQuNS01LjMgNC45LTEyLjggMS41LTE4LjR6IiBmaWxsPSIjRjJCQzM2IiBwLWlkPSIyNjc2Ij48L3BhdGg+PHBhdGggZD0iTTMyOS4xIDQ5OS4yYy04LjUtMS44LTEzLjktMTAuMS0xMi4xLTE4LjZzMTAuMS0xMy45IDE4LjYtMTIuMWM2LjggMS40IDExLjYgNy4xIDEyLjMgMTMuN2w5OS43IDIxLjItMiA5LjQtOTkuNy0yMS4yYy0zLjMgNS44LTEwIDktMTYuOCA3LjZ6TTM3Mi43IDUxNy41bDY5LjEgNS4yLTAuNyA5LjYtNjkuMS01LjJjLTIuNSA2LjEtOC43IDEwLjItMTUuNyA5LjctOC42LTAuNi0xNS4xLTguMi0xNC40LTE2LjggMC42LTguNiA4LjEtMTUuMSAxNi44LTE0LjQgNi45IDAuNSAxMi41IDUuNSAxNCAxMS45ek0zODIuOSA0NjkuNWw2NS4yIDIzLjMgMy4yLTkuMS02NS4yLTIzLjNjMC4yLTYuNi0zLjgtMTIuOS0xMC40LTE1LjItOC4xLTIuOS0xNy4xIDEuMy0yMCA5LjUtMi45IDguMSAxLjMgMTcuMSA5LjUgMjAgNi42IDIuNCAxMy43IDAuMSAxNy43LTUuMnoiIGZpbGw9IiNGMkJDMzYiIHAtaWQ9IjI2NzciPjwvcGF0aD48cGF0aCBkPSJNNDMzLjcgNDE5LjZsNDQuNyA1My03LjQgNi4yLTQ0LjctNTNjLTYuMSAyLjUtMTMuNCAwLjktMTcuOS00LjQtNS42LTYuNi00LjctMTYuNSAxLjktMjIgNi42LTUuNiAxNi41LTQuNyAyMi4xIDEuOSA0LjUgNS4yIDQuOCAxMi43IDEuMyAxOC4zek01OTcuNCA0MjEuOGwtNDguMSA0OS44LTYuOS02LjcgNDguMS00OS44Yy0zLjEtNS44LTIuMy0xMy4yIDIuNi0xOC4yIDYtNi4yIDE1LjktNi40IDIyLjEtMC40IDYuMiA2IDYuNCAxNS45IDAuNCAyMi4xLTQuOSA1LTEyLjIgNi4xLTE4LjIgMy4yek02MzQgNTc3bC02MS43LTMxLjYgNC40LTguNiA2MS43IDMxLjZjNC43LTQuNyAxMi02IDE4LjItMi45IDcuNyAzLjkgMTAuNyAxMy40IDYuOCAyMS4xLTQgNy43LTEzLjQgMTAuNy0yMS4xIDYuOC02LjItMy4yLTkuNC05LjktOC4zLTE2LjR6TTUwOC4xIDY0NS41bDAuOC02OS4zIDkuNiAwLjEtMC44IDY5LjNjNi4yIDIuMSAxMC43IDguMSAxMC43IDE1LTAuMSA4LjYtNy4yIDE1LjYtMTUuOSAxNS41LTguNi0wLjEtMTUuNi03LjItMTUuNS0xNS44IDAuMi03IDQuOC0xMi45IDExLjEtMTQuOHpNMzkyLjkgNTc3bDYxLjctMzEuNi00LjQtOC42LTYxLjcgMzEuNmMtNC43LTQuNy0xMi02LTE4LjItMi45LTcuNyAzLjktMTAuNyAxMy40LTYuOCAyMS4xIDMuOSA3LjcgMTMuNCAxMC43IDIxLjEgNi44IDYuMi0zLjIgOS4zLTkuOSA4LjMtMTYuNHoiIGZpbGw9IiNGMkJDMzYiIHAtaWQ9IjI2NzgiPjwvcGF0aD48cGF0aCBkPSJNNTEzLjkgNTg3LjFjLTQzLjMgMC03OC41LTM1LjItNzguNS03OC41czM1LjItNzguNSA3OC41LTc4LjUgNzguNSAzNS4yIDc4LjUgNzguNWMwIDQzLjItMzUuMiA3OC41LTc4LjUgNzguNXogbTAtMTI5LjJjLTI3LjkgMC01MC42IDIyLjctNTAuNiA1MC42IDAgMjcuOSAyMi43IDUwLjYgNTAuNiA1MC42IDI3LjkgMCA1MC42LTIyLjcgNTAuNi01MC42IDAtMjcuOS0yMi43LTUwLjYtNTAuNi01MC42eiIgZmlsbD0iI0YyQkMzNiIgcC1pZD0iMjY3OSI+PC9wYXRoPjxwYXRoIGQ9Ik01MTMuOSA1OTIuMmMtNDYuMSAwLTgzLjctMzcuNS04My43LTgzLjdzMzcuNS04My43IDgzLjctODMuN2M0Ni4xIDAgODMuNyAzNy41IDgzLjcgODMuN3MtMzcuNiA4My43LTgzLjcgODMuN3ogbTAtMTU3LjFjLTQwLjUgMC03My40IDMyLjktNzMuNCA3My40czMyLjkgNzMuNCA3My40IDczLjQgNzMuNC0zMi45IDczLjQtNzMuNGMwLTQwLjUtMzMtNzMuNC03My40LTczLjR6IG0wIDEyOS4yYy0zMC43IDAtNTUuNy0yNS01NS43LTU1LjdzMjUtNTUuNyA1NS43LTU1LjcgNTUuNyAyNSA1NS43IDU1LjdjMCAzMC43LTI1IDU1LjctNTUuNyA1NS43eiBtMC0xMDEuM2MtMjUuMSAwLTQ1LjUgMjAuNC00NS41IDQ1LjVzMjAuNCA0NS41IDQ1LjUgNDUuNSA0NS41LTIwLjQgNDUuNS00NS41UzUzOSA0NjMgNTEzLjkgNDYzeiIgZmlsbD0iIzQ3MUExQSIgcC1pZD0iMjY4MCI+PC9wYXRoPjwvc3ZnPg==" alt="" />
<video id="vid"src="https://img3.tukuppt.com/video_show/2422006/00/02/12/5b51e93775b06.mp4" muted autoplay loop></video>
<div id="testImg">
<img class="zipic" src="" alt="" />
<img class="zipic" src="" alt="" />
<img class="zipic" src="https://z4a.net/images/2024/01/30/52279182_11f.png" alt="" />
<img class="xipic" src="" alt="" />
<img class="xipic" src="" alt="" />
<img class="xipic" src="" alt="" />
<img class="yipic" src="" alt="" />
<img class="yipic" src="" alt="" />
<img class="yipic" src="https://z4a.net/images/2024/02/06/39424600_4.webp" alt="" />
</div>
<audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/fc/22/02/09/22020916150190549489.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>
用Microsoft Edge浏览器，能看到图片变换效果！ 试贴。。。。。？
不是正式贴吗？ 欣赏亦是金老师的美帖 这么多路径代码，制作辛苦的，亦是金老师可以把路径上传取.svg图片的 也是提前祝亦是金老师新年快乐！ bgmnet 发表于 2024-2-7 22:08
试贴。。。。。？
不是正式贴吗？
bgmnet祝新年快乐！
页:
[1]