普陀申木 发表于 2024-11-6 13:49

春天的脚步 - 王喆

        <style>
#mama {
        margin: 30px 0 30px calc(50% - 641px);
        width: 1280px;
        height: 720px;
        background: url('https://pic.imgdb.cn/item/657994c3c458853aefa076e3.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px rgba(0,0,0,.65);
        overflow: hidden;
        z-index: 1;
        position: relative;
}
                .pg{ width: 100%; height:100%; left: 0%;
position: absolute;z-index:1;
top: 0%; z-index: 1;overflow: hidden;perspective: 3.125vmin;}
#polygon {animation: 6s linear infinite polygon;
left: 50%;
position: absolute;z-index:1;
top: 50%;
transform-style: preserve-3d;
transform: rotatex(90deg) rotatey(0deg) translatey(-10vmin);
}
@keyframes polygon {
100% {
    transform: rotatex(90deg) rotatey(0deg) translatey(0);
}
}
.side {opacity: 1;
background-image: url(https://365.tf/disk/tf/1676401601.png);
background-size:10vmin 25%;

height: 100vmin;
position: absolute;
transform-origin: 0;
width: calc(8vmin + 1px);
}
.side:nth-child(1) {
background-position: -9.94562vmin 0;
transform: rotatey(22.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(2) {
background-position: -19.89124vmin 0;
transform: rotatey(45deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(3) {
background-position: -29.83686vmin 0;
transform: rotatey(67.5deg) translate3d(-50%, -50%, 25vmin);

}
.side:nth-child(4) {
background-position: -39.78247vmin 0;
transform: rotatey(90deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(5) {
background-position: -49.72809vmin 0;
transform: rotatey(112.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(6) {
background-position: -59.67371vmin 0;
transform: rotatey(135deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(7) {
background-position: -69.61933vmin 0;
transform: rotatey(157.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(8) {
background-position: -79.56495vmin 0;
transform: rotatey(180deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(9) {
background-position: -89.51057vmin 0;
transform: rotatey(202.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(10) {
background-position: -99.45618vmin 0;
transform: rotatey(225deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(11) {
background-position: -109.4018vmin 0;
transform: rotatey(247.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(12) {
background-position: -119.34742vmin 0;
transform: rotatey(270deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(13) {
background-position: -129.29304vmin 0;
transform: rotatey(292.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(14) {
background-position: -139.23866vmin 0;
transform: rotatey(315deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(15) {
background-position: -149.18428vmin 0;
transform: rotatey(337.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(16) {
background-position: -159.12989vmin 0;
transform: rotatey(360deg) translate3d(-50%, -50%, 25vmin);
}
                #mplayer { position: absolute; width: 100%; height: 200px; bottom: -30px; display: flex; justify-content: center; align-items: flex-end; }
.mLine { position: relative; margin: 0px 0px 0 0; width: 7px; height: 10px; background:#ff0000; transition: height .3s;border-radius:50%;filter:blur(0.5px)brightness(140%) drop-shadow(#ff0000 0px 0px 8px)drop-shadow(#ff0000 0px 0 8px)drop-shadow(#ff0000 0px 0 12px); }
.mLine::before { position: absolute; content: ''; width: 100%; height: 0px; background:#fff000;top: 20px;}

#picBtn { position: absolute; left: 950px; bottom: 130px; width: 120px; height: 120px; background: url('http://img2.oldkids.cn/upload/2022/12/29/photo_0_20221229164920264.gif')0 0/100% 100%; cursor: pointer; z-index: 1; animation: rot linear 30s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}@keyframes rot {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-20deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(1);left: -30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(120deg)scale(0.2);top:30px;}
}
#plane {position: absolute;left: -150px;top: 180px;width: 100px;height:90px; offset-distance: 0;
offset-path: path("M0 20 Q 400 80, 500 200 T1164 100");background: url("http://img3.oldkids.cn/upload/2022/12/29/photo_0_20221229164919942.gif")0 0/100% 100%;
animation: move 10s linear infinite;}
#plane0 {position: absolute;left: 50px;top: 200px;width: 100px;height: 90px;offset-distance: 0;
offset-path: path("M0 20 Q 400 80, 500 200 T1164 100");background: url("http://img1.oldkids.cn/upload/2022/12/29/photo_0_20221229174044140.gif")0 0/100% 100%;
animation: move0 10s linear infinite;}
@keyframes move { to { offset-distance: 100%;} }
@keyframes move0 { to { offset-distance: 100%;} }
                .vidC { position: absolute; width: 600px; height: 400px;MARGIN-LEFT:-100px;margin-top: 250px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ; }
.vidE { position: absolute; width: 600px; height: 400px;MARGIN-LEFT:-100px;margin-top:0px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ; }
.vidI { position: absolute; width: 600px; height: 300px;MARGIN-LEFT:600px;margin-top:350px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ; }
}
        </style>

<div id="mama" class="mama">
        <audio src="https://fs-im-kefu.7moor-fs1.com/ly/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/1730710682070/春天的脚步 - 王喆.mp3
" autoplay loop></audio>
       <video class="vidE" src="https://img.tukuppt.com/video_show/2418175/00/18/86/5ef73577a5caf.mp4"style="-webkit-mask-image: radial-gradient(black 2% ,transparent 60%)" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="vidC" src="https://img.tukuppt.com/video_show/2418175/00/18/85/5ef75c01cb2e7.mp4                                       
        "style="-webkit-mask-image: radial-gradient(black 2% ,transparent 60%)" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="vidI" src="https://img.tukuppt.com/video_show/2418175/00/18/85/5ef75c22af103.mp4                                               
"style="-webkit-mask-image: radial-gradient(black 30% ,transparent 70%)" autoplay="autoplay" loop="loop" muted="muted"></video>
<divid="plane"> </div>
<divid="plane0"> </div>
<div id="picBtn" ></div>
        <div class="pg">
    <div id="polygon" >
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
       
        </div>


<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/svgpath_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: 0,
                average: 0,
                path: 'M10 50 A90 45 0 1 1 190 50 A90 45 0 1 1 10 50',
                img: { play: '', pause: '' },
                btn: { left: 36, top: 32 },
                track: { track: 'lightblue', prog: 'white' },
                player_css: 'width: 200px; height: 100px; left: 10px; bottom: 10px;',
                lrc_css: 'left: 50%; top: 20px; color: Gold; --bg: url("https://pic.imgdb.cn/item/66bdb1b4d9c307b7e9344c91.jpg");',
                fs_css: 'left: 50%; bottom: 20px; transform: translateX(-50%);',
        });
};

var geci = `
        春天的脚步 - 王喆
词：尹相涛
曲：杨一博
踏着春天的脚步
我们曾出发
筚路蓝缕的坚韧
让梦想开花
年复一年
春风里耕耘播撒
那幸福的彼岸
奋斗才能到达
迢迢来时路
汗水浸芳华
破茧成蝶时
春留千万家
春天的脚步走过
酸甜苦辣
走进我们的心里
把心儿融化
踏着春天的脚步
我们又出发
滴水穿石的坚持
把蓝图描画
风雨兼程
春潮里搏击拼打
这崭新的时代
青春不负韶华
眺望前行路
壮志为天下
待到那一年
春雷传佳话
春天的脚步走在
筑梦路上
走向美好的生活
我们再出发
眺望前行路
壮志为天下
待到那一年
春雷传佳话
春天的脚步走在
筑梦路上
走向美好的生活
我们再出发
走向美好的生活
我们再出发



`;
</script>
                <div style="position:absolute;top: 150px;left: 450px;">
<style type="text/css">
.移{
        position: relative;
        width: 300px;
        height: 300px;
        margin-top:0px;margin-LEFT:0px;
        z-index: 100;
        animation: nm 4s linear infinite;}
</style>
<div class="移">
    <iframe frameborder="0" height="300" marginheight="0" marginwidth="0" scrolling="no" src="https://file.uhsea.com/2410/fafee00706fd05394d2baf4715aaf77aST.html" width="300"></iframe>
</div>
</div>
</div>
</div>

普陀申木 发表于 2024-11-6 13:57

此文，在马黑老师，原生lrc歌词同步之自由路径进度条播放器一文，上加了三个视频，几只横向的蝴蝶，并增加了时钟。

梦江南 发表于 2024-11-6 14:01

欣赏老师精美的音画。{:4_199:}

起个网名好难 发表于 2024-11-6 15:11

欣赏美帖

红影 发表于 2024-11-6 21:49

时钟制作很漂亮，小播、进度条记忆视频都很漂亮。蝴蝶也设计得漂亮，只是黑白的那只可能因为设计的路径的缘故吧，有些时候反着飞了，和实际不符呢{:4_173:}

红影 发表于 2024-11-6 21:50

普陀申木老师很勤奋，做了这么多漂亮的帖子，很赞{:4_199:}

秋思梦景 发表于 2025-2-16 08:20

问候老师好！精美音画佳作，精心制作分享。为您点赞！{:4_187:}
页: [1]
查看完整版本: 春天的脚步 - 王喆