论坛 › 祝福礼堂 › 《为你唱一首生日歌》贺清儿芳辰

红影 发表于 2022-3-24 20:14

《为你唱一首生日歌》贺清儿芳辰

<style type="text/css">
/* 背景图 */
#shengr {
        left:-300px;
      top:100px;
        position: relative;
        width: 1180px;
        height: 693px;
        background: #10408A url('https://pic.imgdb.cn/item/623c21ea27f86abb2acb4a3f.jpg') no-repeat center/cover;
      box-shadow: 4px 4px 5px #888;border-radius:12px;
        background-position: 0 0;
        backdrop-filter: blur(1px);
        animation: chgBgd 1s ease infinite alternate;
}
@keyframes chgBgd {
        to { background-position: -15px 0; }
}

/* 闪光字 */
.gaog {
        font-family: '微软雅黑';
        font-weight: 960;
        font-size: 3rem;
        text-align: center;
        color: transparent;
        background-color: #ff66cc;
        background-clip: text;
        -webkit-background-clip: text;
        position: relative;
}
.gaog::after {
    content: attr(data-text);
    position: absolute;
    left: 108px;
    top: 108px;
    left: 1px;
    top: -2px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem,
rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255,
0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine1 5s infinite linear;
}
@keyframes shine1 {
        0% { background-position: 50% 0; }
        100% { background-position: -190% 0; }
}

/* 播放按钮*/
.picBtn {
      width: 100px;
      height: 100px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif') no-repeat;
      cursor: pointer;
}

</style>

<div id="shengr" >
   <div style="position: absolute; left:200px; top: 106px; width:400px;height: 100px; line-height: 100px; opacity: .95;">
              <p class="gaog" data-text="为你唱一首生日歌">为你唱一首生日歌</p></div>
       <!-- 逐行打字定位 -->
    <divid="tBox" style="position: absolute; left:800px; top: 426px;width: 248px; font-size: 2em;color:#ff66ff;text-shadow: 1px 1px 1px
rgba(0, 0, 0, .25);font-family:'楷体','微软雅黑';"></div>
       <!-- 按钮定位 -->
      <div style="position:absolute; width:120px; left: 840px; top:calc(100% - 520px); text-align:center;">
                <button id="picBtn" class="picBtn"></button></div>
       <!-- 动图定位 -->
      <div style="position: absolute; left:720px; top: 60px; width:100px;text-align:center;">
      <img alt="" src="https://www.huachaowang.com/data/attachment/forum/202007/27/191746drzggxhxsxr9ze4r.gif"/></div>
      <div style="position: absolute; left:620px; top: 100px; width:100px;text-align:center;">
      <img alt="" src="https://www.huachaowang.com/data/attachment/forum/202007/27/191746drzggxhxsxr9ze4r.gif"/></div>
</div>
<!-- 播放器无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="https://s1.ananas.chaoxing.com/audio/f3/c5/2f/a4d05f3559407d2a8cd325b21f064e5c/audio.mp3" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif')") :
(mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')";
});

var txtBox = document.getElementById("tBox");
var txtidx = 0;
var str = "快意花间枕月眠，乐心常醉好春妍。吉人自有三生福，祥瑞相随好梦圆。";

setInterval(function(){
        txtBox.innerHTML = str.substring(0, txtidx) + "|";
        txtidx += 1;
        if(txtidx > str.length) txtidx = 0;
}, 600);

</script>
<br><br><br><br><br><br><br><br><br>

红影 发表于 2022-3-24 20:16

明天就是清儿生日的正日子，用刚学的css文字效果送个小礼，祝福你生日快乐，芳龄永继{:4_179:} @清儿幽幽

樵歌 发表于 2022-3-24 20:26

哇，师妹这礼物好别致{:4_178:}有自己写的七绝，有蛋糕蜡烛有专门的生日祝福歌，师妹真棒{:4_187:}

樵歌 发表于 2022-3-24 20:27

师妹把最近学习的技艺全部都 用上了，真好。{:4_204:}

樵歌 发表于 2022-3-24 20:28

借师妹美贴同歌生日歌，祝清儿生日快乐{:4_204:}

红影 发表于 2022-3-24 21:25

樵歌 发表于 2022-3-24 20:26
哇，师妹这礼物好别致有自己写的七绝，有蛋糕蜡烛有专门的生日祝福歌，师妹真棒

主要是学的那点文字效果想法子用上了，那个逐行打字发觉用来做诗词真挺不错的呢{:4_173:}

红影 发表于 2022-3-24 21:26

樵歌 发表于 2022-3-24 20:27
师妹把最近学习的技艺全部都 用上了，真好。

用了两种之前没用过的效果。全用上不可能的呢，黑黑那里分享的效果好多好多呢。

红影 发表于 2022-3-24 21:26

樵歌 发表于 2022-3-24 20:28
借师妹美贴同歌生日歌，祝清儿生日快乐

明天就是正日子了，咱们一起祝福她生日快乐{:5_166:}

大猫咪 发表于 2022-3-24 21:49

红影制作的真棒！ 温馨浪漫， 歌曲真好听！同祝清儿生日快乐，幸福安康！

{:4_204:}{:4_199:}{:4_177:}{:5_166:}{:4_176:}

红影 发表于 2022-3-24 22:47

大猫咪 发表于 2022-3-24 21:49
红影制作的真棒！ 温馨浪漫， 歌曲真好听！同祝清儿生日快乐，幸福安康！

{:4_177: ...

谢谢猫猫。跟猫猫一起祝福清儿生日{:4_187:}

大猫咪 发表于 2022-3-24 23:28

红影 发表于 2022-3-24 22:47
谢谢猫猫。跟猫猫一起祝福清儿生日

{:4_179:}嗯嗯   一起祝福   浪漫的礼物情谊悠长，生日的祝福满含吉祥，真棒！

{:4_204:}{:4_176:}

清儿幽幽 发表于 2022-3-25 09:55

一句快乐吉祥藏头诗带来慢慢爱意
图文俱佳，动感的画面带来祝福，影儿抱抱
一路有你们，每一天都是快乐 幸福春祺
{:4_185:}

清儿幽幽 发表于 2022-3-25 09:56

红影 发表于 2022-3-24 20:16
明天就是清儿生日的正日子，用刚学的css文字效果送个小礼，祝福你生日快乐，芳龄永继 @清儿幽幽

生活中也不过的   寻常日心有暖暖 足矣亲爱的再次谢谢你精美礼物{:4_171:}

清儿幽幽 发表于 2022-3-25 09:57

樵歌 发表于 2022-3-24 20:26
哇，师妹这礼物好别致有自己写的七绝，有蛋糕蜡烛有专门的生日祝福歌，师妹真棒

小哥哥   同乐同福 影儿费心了温婉的诗词古典雅韵拥抱

清儿幽幽 发表于 2022-3-25 09:58

大猫咪 发表于 2022-3-24 23:28
嗯嗯   一起祝福   浪漫的礼物情谊悠长，生日的祝福满含吉祥，真棒！




喵呜抱抱美人一路有你温暖
借你吉言友谊长存岁月安好
{:4_171:}

鹿儿 发表于 2022-3-25 10:23

聪慧的影子，学啥都快，都漂亮。赞~

鹿儿 发表于 2022-3-25 10:23

也加送一份祝福给清儿，快乐每一天~{:4_204:}

红影 发表于 2022-3-25 14:06

清儿幽幽 发表于 2022-3-25 09:55
一句快乐吉祥藏头诗带来慢慢爱意
图文俱佳，动感的画面带来祝福，影儿抱抱
一路有你们，每一天都是快乐 ...

都是刚学的代码，抱抱清儿，今天是正日子呢，生日快乐{:4_179:}

红影 发表于 2022-3-25 14:07

清儿幽幽 发表于 2022-3-25 09:56
生活中也不过的   寻常日心有暖暖 足矣亲爱的再次谢谢你精美礼物

这样的心境也淡然，想起那些美妙清淡的山芋藤了，春来了，又可以弄那些小装饰玩了呢{:4_173:}

红影 发表于 2022-3-25 14:08

鹿儿 发表于 2022-3-25 10:23
聪慧的影子，学啥都快，都漂亮。赞~

多谢鹿儿，今天正日子，咱们一起祝福清儿{:4_179:}

查看完整版本: 《为你唱一首生日歌》贺清儿芳辰