论坛 › 欢乐水吧 › 我怕的不是冷 （学习黑黑半纸心事效果）

小辣椒 发表于 2023-12-26 22:04

我怕的不是冷 （学习黑黑半纸心事效果）

<style>
#papa {
        margin: 150px 0 0 calc(50% - 881px);
        display: grid;
        place-items: center;
        width: 1600px;
        height: 900px;               
        background: lightblue url('https://xlaj.cn/assets/file/zp/20231223024747.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
               position: relative;
                z-index: 1;
               overflow: hidden;
             --state: running;            
}

#vid {
    position: absolute;
    width: 100%;
    height: 120%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .50;
}
.play_pic {
        position: absolute;
        cursor: pointer;
         
}
.play_pic:nth-of-type(1) {
        width: 280px;
                left: 150px;top:570px;
        opacity: .9;
        transform: rotate(360deg);
        transition: 1.5s;
}
.play_pic:nth-of-type(2) {
        width: 300px;
        bottom: 20px;
        right: 20px;
        animation: rot 10s infinite var(--state);
}
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot {
        to { transform: rotate(1turn); }
#dt2{ position: absolute; width:102px; height:20px; top: 180px; left: 150px; }
#dt3{ position: absolute; width:102px; height:20px; top: 280px; left: 150px; }

</style>
<div id="papa">
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/281a-audiofreehighqps/78/34/GMCoOSQJV9nSACAAAAKPCMpE.m4a" autoplay loop></audio>
        <img class="play_pic" src="https://xlaj.cn/assets/file/zp/20231223025513.svg" alt="" />
        <img class="play_pic" src="https://xlaj.cn/assets/file/zp/20231223024855.svg" alt="" />

<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231223024723.gif" alt="" />
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay="" loop="" muted="">
</div>
<script>
let lrcAr = [
      ,
      ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

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('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
        HCPlayer({
                papa: '#papa',
                lrcAr: lrcAr,
                lrc_css: 'bottom: 8%; left:45%;font-size: 2.2em;--bg: linear-gradient(rgba(135,206,250,.4),rgba(135,206,250,.7)); color: Lavender;',
        });
});

for(i = 0; i < 5; i++) {
        let img = document.createElement('img');
        img.className = 'play_pic';
        img.alt = '';
        img.src = 'https://xlaj.cn/assets/file/zp/20231223024836.svg';
        img.style.cssText += `
        right: ${i * 250 + 250}px;
      top:50px;      
                width: ${i * 120 * 0.2 + 120 * 0.6}px;
                height: ${i * 220 * 0.2 + 220 * 0.6}px;
                filter: opacity(${Math.random() * 0.2 + 0.8}) hue-rotate(${Math.random() * 360}deg);
                animation: rot ${Math.random() * 6 + 4}s ${Math.random() * -3}s infinite linear var(--state);
        `;
        papa.appendChild(img);
}
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br>

小辣椒 发表于 2023-12-26 22:07

@马黑黑

黑黑我捣鼓了3个svg图片，勉强完成了任务，但有一个动图我没有上去，想加隐藏兔子的眼睛，就是不能在这个位置，上去就居中，我就是加了定位代码也是没有用

小辣椒 发表于 2023-12-26 22:09

@红影

亲爱的，套用你的，自己一下子都做不出来了，捣鼓到最后还是小兔子眼睛没有加进去，小兔子svg图片颜色我修改白颜色成功了。

红影 发表于 2023-12-26 22:09

这么多漂亮的雪花，当中的那个小动图也很可爱。欣赏亲爱的好制作{:4_199:}

小辣椒 发表于 2023-12-26 22:10

确实做帖要想一想了，没有以前轻松{:4_198:}

红影 发表于 2023-12-26 22:10

亲爱的制作总是创意多多，真棒{:4_199:}

红影 发表于 2023-12-26 22:11

小辣椒 发表于 2023-12-26 22:09
@红影

亲爱的，套用你的，自己一下子都做不出来了，捣鼓到最后还是小兔子眼睛没有加进去，小兔子svg图 ...

啊？我都想不起我怎么做的了{:4_173:}

小辣椒 发表于 2023-12-26 22:11

这个雪花开始还不能分开，后来总算可以了{:4_170:}

马黑黑 发表于 2023-12-26 22:11

小辣椒 发表于 2023-12-26 22:07
@马黑黑

黑黑我捣鼓了3个svg图片，勉强完成了任务，但有一个动图我没有上去，想加隐藏兔子的眼睛，就是 ...

父元素强制了子元素居中定位。子元素要设置自己的位置，应这么做（选择器假设是 .myImage)：

.myImage {
    position: absolute;
    left: 200px;
    top: 200px;
}

必须先设置 position 为绝对定位。

马黑黑 发表于 2023-12-26 22:12

另外，如果没有特别要求，不必用 .svg 做图片，用常规的图片就好

小辣椒 发表于 2023-12-26 22:12

黑黑的高科技真的有点烧脑，特别我现在。。。{:4_170:}

小辣椒 发表于 2023-12-26 22:13

红影 发表于 2023-12-26 22:11
啊？我都想不起我怎么做的了

我只是稍微改了一下{:4_170:}

小辣椒 发表于 2023-12-26 22:14

马黑黑 发表于 2023-12-26 22:11
父元素强制了子元素居中定位。子元素要设置自己的位置，应这么做（选择器假设是 .myImage)：

.myImage ...

我仔细看看，我感觉已经加了的，这个我绝对定位代码是想到的。

小辣椒 发表于 2023-12-26 22:15

马黑黑 发表于 2023-12-26 22:12
另外，如果没有特别要求，不必用 .svg 做图片，用常规的图片就好

是的，我是特意找svg做的图片，看见你有3个的

马黑黑 发表于 2023-12-26 22:15

小辣椒 发表于 2023-12-26 22:14
我仔细看看，我感觉已经加了的，这个我绝对定位代码是想到的。

那就没有理由不能定位

红影 发表于 2023-12-26 22:16

小辣椒 发表于 2023-12-26 22:13
我只是稍微改了一下

亲爱的这个更大气，漂亮{:4_199:}

马黑黑 发表于 2023-12-26 22:16

小辣椒 发表于 2023-12-26 22:15
是的，我是特意找svg做的图片，看见你有3个的

你用 .jpg 之类的也是一样的

小辣椒 发表于 2023-12-26 22:16

马黑黑 发表于 2023-12-26 22:12
另外，如果没有特别要求，不必用 .svg 做图片，用常规的图片就好

现在这样3个svg图片，其实我用自己的图片会更加漂亮一点

小辣椒 发表于 2023-12-26 22:17

红影 发表于 2023-12-26 22:10
亲爱的制作总是创意多多，真棒

哇塞~~我都难为情了，没有看你的代码自己都不晓得怎么去修改

马黑黑 发表于 2023-12-26 22:17

小辣椒 发表于 2023-12-26 22:16
现在这样3个svg图片，其实我用自己的图片会更加漂亮一点

就是呀，没有必要非用 .svg 不可，不能这么机械

查看完整版本: 我怕的不是冷 （学习黑黑半纸心事效果）