亦是金 发表于 2023-5-15 21:20

《爱是一场及时雨》 - 云菲菲

本帖最后由 亦是金 于 2023-5-15 22:07 编辑 <br /><br />
<div style="width: 1130px;height: 640px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:10px;margin-LEFT: -260px;">


<style>
#papa {
      margin: 0px0px;
      place-items: center;
      width: 1130px;
      height: 640px;
   background: url('https://s1.ax1x.com/2023/05/15/p92l0fA.jpg')no-repeat center/cover;; border-radius: 0%;display: grid;
      box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
      user-select: none;
      position: relative;
      z-index: 1;   
       overflow:hidden;
}





.photo {
       width: 100%;
       height: 105%;
       position: absolute;
       z-index: 2;
       top:0px;
       left:0px;
       filter:contrast(120%)brightness(100%);
      -webkit-mask-image: radial-gradient(black 30% ,transparent 70%);
       animation: round 64s linear infinite;
opacity: 0;}

@keyframes round {
      0% {opacity: 0;filter:hue-rotate(360deg)}
       10% {opacity: 1;}
       18% {opacity: 0;}
}

img:nth-child(1) {
animation-delay: 56s;
}
img:nth-child(2) {
animation-delay: 48s;
}
img:nth-child(3) {
animation-delay: 40s;
}
img:nth-child(4) {
animation-delay: 32s;
}
img:nth-child(5) {
animation-delay: 24s;
}
img:nth-child(6) {
animation-delay: 16s;
}
img:nth-child(7) {
animation-delay: 8s;
}
img:nth-child(8) {
animation-delay: 0s;
}


.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}


#ptpt{width: 100%;
      height: 100%;display: grid;
left: 0%; top:0%;
background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(242, 9, 9, 0) 28%,rgba(255, 2, 2, 0.62) 65%);
position:absolute;
      z-index: 4;
      opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{0%{filter:hue-rotate(360deg);}100%{filter:hue-rotate(0deg)}}


</style>

<div id="papa">
<div id="testImg" >
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/12/H095RO.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/12/H09TQe.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/12/H09IzD.jpg" />
<img alt=""class="photo"src="https://s4.ax1x.com/2022/02/12/H09hi6.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/12/H094JK.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/12/H09LdI.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/12/H09HLd.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/12/H09qeA.jpg" />
</div>

</style>








<div style="position: relative; width: 1130px; height: 640px;top:-200px;LEFT: 0px;z-index: 12435;">

<css-doodle grid="16" id="fFloat">
        :doodle {
                @size: 1150px 680px;
                --state:paused;
        }
        position: absolute;
        left: @r(255)%;
        top: -10%;
        :after {
                position: absolute;
                content: '@p(及时雨, ♬, ♪, ♩,♫, ∮, ✲, ❉, ❤, 爱, ☺, ☀, ★, ☆,love, ❄)';
                color:#fb52f9;
                font-size: @r(15, 25)px;
        }
        animation: fall 40s @r(-6, 36)s infinite var(--state);
        @keyframes fall {
                from { transform: rotate(0deg) translate(0px); }
                to { transform: rotate(@r(-250,260)deg) translate(-1500px); }
        }
</css-doodle>

<div style="position: relative; width: 1130px; height: 640px;top:0px;LEFT: 300px;z-index: 12435;">
<css-doodle id="mplayer">
:doodle {
        @grid: 2 / 500px 100px;
        color: var(--color);
      top: 0px;
      bottom: 100px;
        z-index: 100;
        --prog: 0%;
      --size: 60px;
      --ttmsg1: '00:00';
      --ttmsg2: '00:00';
      --color: #ffffff;
                }
                /* 时间信息 : 左 */
@nth(1) {@place: 5% 100%; :after { content: var(--ttmsg1); } }
                /* 控制器 */
@nth(2) {
        @size: 60px;
        @shape: clover 5;
        @place: 50% 35%;                        
        background: var(--color);
        animation: rot 6s infinite linear var(--state);
}
                /* 时间信息 : 右 */
@nth(3) {
        @place: 95% 100%;
        :after { content: var(--ttmsg2); }
}
                /* 进度条 */
@nth(4) {
        @place: 50% 80%;
        @size: 100% 2px;
        background: Silver;
        display: grid;
        place-items: center start;
:before {
        content: '';
        width: var(--prog);
        height: 100%;
        background: var(--color);
}
}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>


<div style="position: relative; top:-20px;LEFT: 100px;z-index: 12435;">
<css-doodle id="lrc">
:doodle {
        @size: auto 3.5em;
        top: 100px;
        --geci: "花潮lrc在线";
      --motion: cover2;
      --tt: 1s;
}
                /* 单元格两个伪元素显示lrc歌词 */
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        color: snow; /* 歌词底色 */
                        font: bold 2.4em sans-serif;
                        text-shadow: 1px 1px 1px #000;
                        white-space: pre;
               }
                :after {
                        position: absolute;
                        width: 0;
                        color: #fb52f9; /* 同步歌词颜色 */
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
</css-doodle>





<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" style="z-index:88;position:absolute;height: 50px; top: -120px;left: -220px;">


<style type="text/css">

#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: relative;width: 300px;height: 30px;top:-600px;LEFT: -750px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">《爱是一场及时雨》</span>
<span style="color:#3d46f7;"><span style="font-size:20px;">   -云菲菲</span></div>

<div style="position: relative;width: 500px;height: 50px;top: -80px;LEFT: 520px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;"> 亦是金在线音乐 </span></span></span></p></div>

<div style="position: relative;width: 600px;height: 50px;top:-160px;LEFT: 150px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#0f09fe;"><span style="font-family:华文隶书;"><span style="font-size:28px;"></span></span></span></p></div>

</style>

<audio id="aud" src="https://www.qqmc.com/mp3/music260176009.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://www.huachaowang.com/css-doodle.min.js';
        document.head.appendChild(script);
        let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
        let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),fFloat.style.setProperty('--state', 'paused') ) : (papa.style.setProperty('--state','running'),fFloat.style.setProperty('--state', 'running'));
        let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
        mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;};
        mplayer.onmousemove = (e) => {let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);mplayer.style.cursor = cursors;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;};
})();
</script>

红影 发表于 2023-5-15 21:29

又是带汉字的花瓣雨，图片轮播特别漂亮。欣赏亦是金老师好帖
{:4_199:}

梦缘 发表于 2023-5-15 21:44

谢谢老师的分享，欣赏问好！{:4_187:}

亦是金 发表于 2023-5-15 22:14

红影 发表于 2023-5-15 21:29
又是带汉字的花瓣雨，图片轮播特别漂亮。欣赏亦是金老师好帖

谢谢红影欣赏点赞加分鼓励！{:4_187:}

亦是金 发表于 2023-5-15 22:15

梦缘 发表于 2023-5-15 21:44
谢谢老师的分享，欣赏问好！

谢谢梦缘欣赏点赞加分鼓励！祝你欣赏愉快！{:4_187:}

红影 发表于 2023-5-15 22:30

亦是金 发表于 2023-5-15 22:14
谢谢红影欣赏点赞加分鼓励！

亦是金老师的帖子特别漂亮{:4_187:}

亦是金 发表于 2023-5-15 22:51

红影 发表于 2023-5-15 22:30
亦是金老师的帖子特别漂亮

谢谢夸奖！今晚一定有个好梦！{:4_189:}

罗浮梦 发表于 2023-5-15 22:59

真漂亮啊

焱鑫磊 发表于 2023-5-15 23:11

欣赏漂亮帖子！{:4_187:}{:4_187:}{:4_187:}

亦是金 发表于 2023-5-15 23:23

罗浮梦 发表于 2023-5-15 22:59
真漂亮啊

问好！谢谢欣赏！{:4_190:}

亦是金 发表于 2023-5-15 23:24

焱鑫磊 发表于 2023-5-15 23:11
欣赏漂亮帖子！

问好！谢谢欣赏！{:4_187:}

醉美水芙蓉 发表于 2023-5-16 06:12

亦是金 发表于 2023-5-16 09:56

问好！谢谢欣赏！{:4_187:}

红影 发表于 2023-5-16 21:06

亦是金 发表于 2023-5-15 22:51
谢谢夸奖！今晚一定有个好梦！

今天可以说说了，昨夜有梦么{:4_173:}
页: [1]
查看完整版本: 《爱是一场及时雨》 - 云菲菲