一首《天边》送给無名
<style>#mydiv {
margin: 180px 0 20px calc(50% - 1041px);
width: 1920px;
height: 1080px;
box-shadow: 8px 8px 16px #000;
background: #527785 url('https://pic.imgdb.cn/item/66a90e27d9c307b7e9620b29.jpg') no-repeat center/cover;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
}
#mydiv > svg { stroke-linecap: round; }
.cloud {
position: absolute;
left: 0;
top: -300px;
width: 350px;
height: 200px;
background: #000;
border-radius: 40%;
box-shadow:
300px 400px 30px 20px rgba(255,255,255,.95),
600px 390px 30px rgba(255,255,255,.85),
60px 360px 30px rgba(255,255,255,.9);
filter: url(#svg-cloud);
animation: move 200s infinite linear;
}
.cloud:nth-of-type(2) { animation-delay: -100s; }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vid:nth-of-type(1) { bottom: 0; mix-blend-mode: screen;opacity: .07; }
.vid:nth-of-type(2) { height: 25%; top: 0; mix-blend-mode: multiply; }
#papa:fullscreen .vid:nth-of-type(1) { height: 38%; }
@keyframes rot { to { transform: rotate(360deg); } }
#dt1{ position: absolute; width:300px; height: 166px; top:450px; left: 1320px; }
#dt2{ position: absolute; width:140px; height: 104px; top:72px; left: 147px; }
#dt3{ position: absolute; width:55px; height: 62px; top: 380px; left:1250px; }
#dt4{ position: absolute; width: 60px; height: 60px; top: 650px; left: 782px; }
#dt5{ position: absolute; width: 176px; height: 156px; top: 75px; left: 1025px; }
#dt6{ position: absolute; width:300px; height: 180px; top:700px; left: 1200px; }
@keyframes move {
from { transform: translateX(-1400px); }
to { transform: translateX(1400px); }
}
</style>
<div id="mydiv">
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/04/57/90/6490fb3b722ba.mp4" autoplay loop muted></video>
<img id="dt1" src="https://pic.imgdb.cn/item/65e1d9359f345e8d03a54f84.gif " alt="" />
<img id="dt2" src="https://pic.imgdb.cn/item/66688f01d9c307b7e97356d3.gif" alt="" />
<img id="dt3" src="https://pic.imgdb.cn/item/66a90e75d9c307b7e9624dff.gif " alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt4" src="https://pic.imgdb.cn/item/66a90e95d9c307b7e9626826.gif " alt="" style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt5" src="https://pic.imgdb.cn/item/66a90e42d9c307b7e96221d5.gif" alt="" />
<img id="dt6" src="https://pic.imgdb.cn/item/66a90e5bd9c307b7e9623788.gif" alt="" />
<svg style="width: 0; height: 0; position: absolute;">
<filter id="svg-cloud">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="5" seed="20" result="turb"></feTurbulence>
<feDisplacementMap in2="turb" in="SourceGraphic" scale="170" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
</svg>
<div class="cloud"></div>
<div class="cloud"></div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20231030141835.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
]
let js1 = 'https://xlaj.cn/assets/file/zp/20231029141742.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
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();
};
loadJs(js1, () => {
HCPlayer({
papa: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'top: 900px; --bg: linear-gradient(rgba(255,0,0,.75),rgba(255,0,0,.54));color: snow;',
fs_css: 'left: -200px; background: transparent;',
player_css: 'width: 220px; height: 220px; left: 120px; bottom: 265px; background: url("") no-repeat 35px 15px',
path: 'm200.62628,85.24308c0.12325,1.69025 0.12325,3.38086 0.12325,5.07111c0,51.55474 -40.04122,110.95789 -113.22493,110.95789c-22.54653,0 -43.49116,-6.39937 -61.10948,-17.50676c3.20343,0.36198 6.28324,0.48277 9.60992,0.48277c18.60358,0 35.72927,-6.15743 49.40502,-16.66163c-17.49507,-0.36235 -32.15646,-11.5909 -37.20793,-27.04542c2.4643,0.36198 4.92821,0.60355 7.51576,0.60355c3.57281,0 7.14601,-0.48314 10.47231,-1.32789c-18.2342,-3.62243 -31.91033,-19.31816 -31.91033,-38.27396l0,-0.48277c5.29759,2.89772 11.45834,4.70875 17.9877,4.94995c-10.71882,-7.00293 -17.74119,-18.9558 -17.74119,-32.47852c0,-7.24412 1.97091,-13.8847 5.42085,-19.68014c19.58961,23.66456 49.03564,39.11872 82.05411,40.80933c-0.61588,-2.89772 -0.98564,-5.91586 -0.98564,-8.93437c0,-21.49155 17.74157,-38.9983 39.7951,-38.9983c11.45796,0 21.80702,4.70875 29.07628,12.31523c8.99366,-1.69025 17.61794,-4.95032 25.25696,-9.41751c-2.95731,9.05553 -9.24054,16.66201 -17.49507,21.49117c8.0084,-0.84475 15.77029,-3.01851 22.91591,-6.03665c-5.42009,7.72689 -12.19671,14.60866 -19.95861,20.16291z',
btn: {left: 55, top: 100},
track: {track: 'snow', prog: '#fb0925'},
img: {play: '', pause: ''}
});
});
loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 1,
size: {width: 130, height: 89},
shape: {background: 'url("https://pic.imgdb.cn/item/66a90dd8d9c307b7e9605481.png ")', borderRadius: '0'},
maxTime: 24,
offset: {x: 300, y: -550},
ani: 'toLeft',
});
});
})();
</script>
<br><br><br><br><br> 问好無名，因为我的上传空间你会看不见，这次我上传了图床的链接，不知道你可以不可以看见 小辣椒 发表于 2024-7-31 21:40
问好無名，因为我的上传空间你会看不见，这次我上传了图床的链接，不知道你可以不可以看见 ...
帮你艾特@無名 这个路径播放器好看，画面云动效果漂亮{:5_150:} 图图大气，效果加的到位，赞的{:5_149:} 無名收礼开心{:5_146:} 欣赏老师的精彩音画，点赞！
老谟深虑 发表于 2024-8-4 19:04
欣赏老师的精彩音画，点赞！
老谟晚上好，谢谢欣赏{:5_128:}
页:
[1]