论坛 › 欢乐水吧 › 学习帖【永远跟党走】鸣谢红影的追梦帖子代码

梦江南 发表于 2024-7-3 10:07

学习帖【永远跟党走】鸣谢红影的追梦帖子代码

本帖最后由 梦江南 于 2024-7-3 19:07 编辑 <br /><br /><style>
#mydiv {
    --width: 1024px;
    margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
    width: var(--width);
    height: 600px;
    background: #eee url('https://pic.imgdb.cn/item/6684b0b8d9c307b7e94e9ca4.jpg') no-repeat center/cover;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .7);
    overflow: hidden;
    z-index: 1;
    position: relative;
}

#mydiv::after {
    content: attr(data-lrc);
    position: absolute;
    top: 20px;
    left: -0px;
    width: 100%;
    height: 60px;
    text-align: center;
    font: normal 36px/60px sans-serif;
    color: transparent;
    text-shadow: 2px 2px 2px rgba(246, 151, 60, .8);
    background: radial-gradient(pink, white, orange) center/120px 60px;
    -webkit-background-clip: text;
}

.star {
    position: absolute;
    width: 72px;
    height: 68px;
    background: url('https://pic.imgdb.cn/item/6683a25bd9c307b7e9703f48.png') no-repeat center/cover;
    opacity: .95;
    transition: width .5s, height .5s, opacity .5s;
    cursor: pointer;
    offset-path: path('M80 100 Q500 800,944 100');
    offset-distance: 0;
    animation: 5s linear forwards;
}

.star:hover {
    width: 155px;
    height: 135px;
    opacity: .75;
}

.star:nth-of-type(1) {
    left: -30px;
    top: 0;
    animation-name: move1-1;
}

.star:nth-of-type(2) {
    left: 30px;
    top: 0;
    background: url('https://pic.imgdb.cn/item/6683a25bd9c307b7e9703f48.png') no-repeat center/cover;
    offset-distance: 50%;
}

#vid { position: absolute; bottom:0px; width: 100%; height: 110%;object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity .2s; }

#pic {
    position: absolute;
    width: 640px;
    height: 360px;
    top: 52px;
    left: 0px;
    mix-blend-mode: screen;
    animation: hy 1.2s infinite alternate linear var(--state);
}

#pic1 {
    position: absolute;
    width: 112px;
    height: 57px;
    top: 262px;
    left: 0px;
    mix-blend-mode: screen;
    animation: hy1 0.8s infinite alternate linear var(--state);
}

#pic2 {
    position: absolute;
    width: 58px;
    height: 77px;
    top: 212px;
    right: 0px;
    mix-blend-mode: screen;
    animation: hy2 0.9s infinite alternate linear var(--state);
}

@keyframes move1-1 {
    from {
      offset-distance: 0%;
      transform: rotate(-10deg);
    }

    to {
      offset-distance: 50%;
      transform: rotate(-10deg);
    }
}

@keyframes move1-2 {
    from {
      offset-distance: 50%;
      transform: scale(-1, 1) rotate(360deg);
    }

    to {
      offset-distance: 0%;
      transform: scale(-1, 1) rotate(360deg);
    }
}

@keyframes move2-1 {
    from {
      offset-distance: 50%;
      transform: rotate(10deg);
    }

    to {
      offset-distance: 100%;
      transform: rotate(10deg);
    }
}

@keyframes move2-2 {
    from {
      offset-distance: 100%;
      transform: scale(-1, 1) rotate(-30deg);
    }

    to {
      offset-distance: 50%;
      transform: scale(-1, 1) rotate(-20deg);
    }
}

@keyframes hy {
    from {
      transform: skewX(-0deg);
    }

    to {
      transform: skewX(10deg);
    }
}

@keyframes hy1 {
    from {
      opacity: 1;
      transform: rotate(3deg);
    }

    to {
      opacity: .25;
      transform: rotate(2deg);
    }
}

@keyframes hy2 {
    from {
      opacity: 1;
    }

    to {
      opacity: .5;
    }
}
</style>
<div id="mydiv" class="mydiv" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1852967933" autoplay loop></audio>
<video id="vid" src="http://img.tukuppt.com/video_show/2405811/00/02/29/5b55eae48c554.mp4" autoplay loop muted></video>
<div id="b1" class="star"></div>
<div id="b2" class="star"></div>
</div>
<script>
const stars = ;
b1.onanimationend = () => {
    let ani = getComputedStyle(b1).getPropertyValue('animation-name');
    if (ani === 'move1-1') {
      b1.style.animationName = '';
      b2.style.animationName = 'move2-1';
    } else {
      b1.style.animationName = 'move1-1';
    }
};
b2.onanimationend = () => {
    let ani = getComputedStyle(b2).getPropertyValue('animation-name');
    if (ani === 'move2-1') {
      b2.style.animationName = 'move2-2';
    } else {
      b2.style.animationName = '';
      b1.style.animationName = 'move1-2';
    }
};
var curkey = 0,
    lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    stars.forEach(b => {
      b.style.animationPlayState = aud.paused ? 'paused' : 'running';
      b.title = ['暂停', '播放'][+aud.paused];
    });
    aud.paused ? vid.pause() : vid.play();
    mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
};
aud.onplaying = aud.onpause = () => mState();
stars.forEach(b => b.onclick = () => aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause()));
onresize = () => mydiv.style.setProperty('--distance', mydiv.offsetWidth + 'px');
aud.onseeked = () => curkey = 0;
aud.ontimeupdate = () => {
    if (curkey > lrcAr.length - 1) return;
    if (aud.currentTime >= lrcAr) {
      mydiv.dataset.lrc = lrcAr;
      curkey++;
    }
};
var lrc = `
作词 : 沙洪 \n 作曲 : 王久鸣\n你是灯塔\n照耀着黎明前的海洋\n你是舵手\n掌握着航行的方向\n伟大的中国共产党\n你就是核心 你就是方向\n我们永远跟着你走\n人类一定解放\n我们永远跟着你走\n人类一定解放\n你是曙光\n播撒着科学真理的光芒\n你是救星\n承载着民族的希望\n伟大的中国共产党\n你就是核心 你就是方向\n我们永远跟着你走\n心中充满阳光\n我们永远跟着你走\n心中充满阳光\n你是先锋\n为中国开辟崭新的道路\n你是旗帜\n引领着我们实现梦想\n伟大的中国共产党\n你就是核心 你就是方向\n我们永远跟着你走\n前程灿烂辉煌\n我们永远跟着你走\n前程灿烂辉煌\n我们永远跟着你走\n前程灿烂辉煌\n我们永远跟着你走\n前程灿烂辉煌\n 发行 : 当红影视文化传媒\n 制片 : 李龙哥\n 出品 : 李龙哥\n 监制 : 李龙哥\n 鸣谢红影的追梦代码
`;
getAr(lrc);
</script>

梦江南 发表于 2024-7-3 10:08

鸣谢红影的追梦帖子的代码。

老谟深虑 发表于 2024-7-3 10:46

          欣赏老师的精美音画，点赞！

梦油 发表于 2024-7-3 11:00

欣赏佳作，问候梦江南。

梦江南 发表于 2024-7-3 11:06

老谟深虑 发表于 2024-7-3 10:46
欣赏老师的精美音画，点赞！

问好老谟老师，谢谢首席支持！{:4_204:}

梦江南 发表于 2024-7-3 11:07

梦油 发表于 2024-7-3 11:00
欣赏佳作，问候梦江南。

问好棼油老师，谢谢分享支持！

樵歌 发表于 2024-7-3 11:22

精彩制作，传递满满意的正能量！

起个网名好难 发表于 2024-7-3 12:40

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

红影 发表于 2024-7-3 12:49

梦江南 发表于 2024-7-3 10:08
鸣谢红影的追梦帖子的代码。

哪里，我也是用的黑黑的代码呢。这个制作很好，非常正能量。给梦江南点赞{:4_199:}

红影 发表于 2024-7-3 12:57

这个视频就不用转向了呢，因为旗帜正好和底图相配。比如
#vid { position: absolute; bottom:0px; width: 100%; height: 110%;object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity .2s; } 这样设就行了。
歌词也不用调位置，在#mydiv::after 里去掉left:-220px; 就居中了呢{:4_204:}

梦江南 发表于 2024-7-3 13:17

樵歌 发表于 2024-7-3 11:22
精彩制作，传递满满意的正能量！

谢谢樵歌管理员支持鼓励！问好！

梦江南 发表于 2024-7-3 13:18

起个网名好难 发表于 2024-7-3 12:40


谢谢老师分享支持！问好！

梦江南 发表于 2024-7-3 13:20

红影 发表于 2024-7-3 12:49
哪里，我也是用的黑黑的代码呢。这个制作很好，非常正能量。给梦江南点赞

谢谢影子分享支持！问好！

梦江南 发表于 2024-7-3 13:22

红影 发表于 2024-7-3 12:57
这个视频就不用转向了呢，因为旗帜正好和底图相配。比如
#vid { position: absolute; bottom:0px; width:...

非常感谢影子的无私指导，已改过了。谢谢！
https://pic.imgdb.cn/item/666a6741d9c307b7e9aa2b68.gif

红影 发表于 2024-7-3 14:57

梦江南 发表于 2024-7-3 13:20
谢谢影子分享支持！问好！

不客气啊，再赏梦江南好帖{:4_187:}

红影 发表于 2024-7-3 14:58

梦江南 发表于 2024-7-3 13:22
非常感谢影子的无私指导，已改过了。谢谢！

我只是感觉这样更好点，算不上什么指导呢。做帖子还是应该遵从你自己的感觉才好{:4_204:}

起个网名好难 发表于 2024-7-3 16:41

本帖最后由 起个网名好难 于 2024-7-3 16:45 编辑

梦江南 发表于 2024-7-3 13:18
谢谢老师分享支持！问好！
感觉五角星大了些，另外变色似乎显得有点不严肃

梦江南 发表于 2024-7-3 16:57

红影 发表于 2024-7-3 14:57
不客气啊，再赏梦江南好帖

谢谢影子，辛苦了！{:4_204:}

梦油 发表于 2024-7-3 16:59

梦江南 发表于 2024-7-3 11:07
问好棼油老师，谢谢分享支持！

梦江南朋友别客气。

梦江南 发表于 2024-7-3 16:59

红影 发表于 2024-7-3 14:58
我只是感觉这样更好点，算不上什么指导呢。做帖子还是应该遵从你自己的感觉才好

这样好看多了。我还没有这种水平啦！

查看完整版本: 学习帖【永远跟党走】鸣谢红影的追梦帖子代码