论坛 › 音乐沙龙 › 竹里馆

绿叶清舟 发表于 2024-2-22 15:07

竹里馆

本帖最后由 绿叶清舟 于 2024-2-23 11:56 编辑 <br /><br /><!-- CSS代码 -->

<style>

#papa {

    position: relative;

    margin: 0 0 0 calc(50% - 633px);

    width: 1100px;

    height: 700px;

    background: url('https://pic.imgdb.cn/item/65d6eb739f345e8d0349e704.jpg') no-repeat center/cover;

    box-shadow: 3px 3px 20px #000;

    overflow: hidden; /* 防止内部元素外溢 */

    z-index: 1;

}

/* papa第一代子元素 img */

#papa > img {

    position: absolute;

    TOP: 0px;
   
    right: 100px;

    width: 300px;

    transform-origin: 100% 0%;

    cursor: pointer;

    animation: swear 2s infinite alternate var(--state);

}

/* 头三个第一代img元素 */

#papa > img:nth-of-type(-n+3) {opacity: .8; }



/* 关键帧动画 */

@keyframes swear {

    from { transform: skew(2deg); }

    to { transform: skew(-2deg); }

}

</style>



<!-- HTML代码 -->

<div id="papa">

    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1418582780" autoplay loop></audio>

   

</div>



<!-- JS代码 -->

<script>

var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');

aud.addEventListener('playing', mState);

aud.addEventListener('pause', mState);

// 生成1丛小竹子

Array.from({length: all = 1}).forEach((image,key) =>{

    image = document.createElement('img'); //创建img标签

    image.src = 'https://pic.imgdb.cn/item/65d6ebb19f345e8d034a982f.png';

    //追加img样式 +=

    image.style.cssText += `

      left: ${key * 500 / all - -650}px;

      height: ${Math.random() * 200 + 200}px;

      animation-delay: -${Math.random() * 2}s;

    `;

    //img个体单击事件

    image.onclick = () => aud.paused ? aud.play() : aud.pause();

    papa.append(image); //父元素追加img元素

});

</script>

绿叶清舟 发表于 2024-2-22 15:08

不会玩啦，怎么让上面的不动下面动呢

梦油 发表于 2024-2-22 17:31

欣赏佳作，问候清舟。

红影 发表于 2024-2-22 19:33

绿叶清舟 发表于 2024-2-22 15:08
不会玩啦，怎么让上面的不动下面动呢

transform-origin: 50% 100%; 定位转动的点，这里定了横向居中纵向在最下的点为转动基准

这里感觉清舟的那张小图貌似定在上面的最右为转动点，应该比较符合，那就transform-origin: 100% 0%;就可以了，清舟试试{:4_204:}

红影 发表于 2024-2-22 19:35

这个语句里第一个是横向的，想让上面定住，把第二个数字取0就是对应的上面啊{:4_173:}

红影 发表于 2024-2-22 19:36

其实现在也挺好看啊，我以为是下面有小竹竿撑着，让这片叶子在动呢{:4_173:}

红影 发表于 2024-2-22 19:37

这样的画面好雅致，喜欢这样的淡雅的氛围，带着墨香的感觉{:4_187:}

小辣椒 发表于 2024-2-22 21:20

清舟这副画处之那我大画家啊，漂亮的竹叶{:4_199:}

樵歌 发表于 2024-2-22 21:26

优雅的情调，清幽的神仙世界。

绿叶清舟 发表于 2024-2-23 11:57

梦油 发表于 2024-2-22 17:31
欣赏佳作，问候清舟。

谢谢梦油，元宵快乐

绿叶清舟 发表于 2024-2-23 11:57

红影 发表于 2024-2-22 19:33
transform-origin: 50% 100%; 定位转动的点，这里定了横向居中纵向在最下的点为转动基准

这里感觉清舟 ...

谢谢影，改好了这样看着舒服多了，你太厉害了

绿叶清舟 发表于 2024-2-23 12:04

红影 发表于 2024-2-22 19:35
这个语句里第一个是横向的，想让上面定住，把第二个数字取0就是对应的上面啊

好的，记不住以后就来翻这个贴 {:4_189:}

绿叶清舟 发表于 2024-2-23 12:04

红影 发表于 2024-2-22 19:36
其实现在也挺好看啊，我以为是下面有小竹竿撑着，让这片叶子在动呢

把根都撑断了{:4_173:}

绿叶清舟 发表于 2024-2-23 12:05

樵歌 发表于 2024-2-22 21:26
优雅的情调，清幽的神仙世界。

特喜欢竹，看到这个播放器就整成这样了

绿叶清舟 发表于 2024-2-23 12:07

小辣椒 发表于 2024-2-22 21:20
清舟这副画处之那我大画家啊，漂亮的竹叶

盗时没看画家名字啊{:4_189:}

红影 发表于 2024-2-23 13:21

绿叶清舟 发表于 2024-2-23 11:57
谢谢影，改好了这样看着舒服多了，你太厉害了

这是黑黑讲过的啊，上节课清舟没来，所以没听到而已{:4_173:}

红影 发表于 2024-2-23 13:23

绿叶清舟 发表于 2024-2-23 12:04
好的，记不住以后就来翻这个贴

我又说一遍，是怕你想定上面的某个点，不是定最右，所以赶紧又解释一遍，
反正横向纵向都是可以从0%-100%随便调的{:4_173:}

红影 发表于 2024-2-23 13:24

绿叶清舟 发表于 2024-2-23 12:04
把根都撑断了

哈哈，看到清舟幽默的回复笑喷{:4_170:}

梦油 发表于 2024-2-23 14:29

绿叶清舟 发表于 2024-2-23 11:57
谢谢梦油，元宵快乐

清舟朋友别客气。

冬天的雨 发表于 2024-2-23 21:56

清舟这个背景图是那位大师的水墨画{:4_187:}

查看完整版本: 竹里馆