论坛 › 欢乐水吧 › 我以为……（学习黑师图文小贴子效果）

南无月 发表于 2023-6-6 18:53

我以为……（学习黑师图文小贴子效果）

本帖最后由 南无月 于 2023-6-6 18:57 编辑 <br /><br /><style>#papa {
                margin: 0 0 0 calc(50% - 593px);
                width: 1024px;
                height: 640px;
                background: tan url('https://s1.ax1x.com/2023/06/05/pCPnCcD.jpg') no-repeat center / cover;
                box-shadow: 0 0 8px #000;
                display: grid;
                place-items: center;
                position: relative;
                overflow: hidden;
                --state: paused;
        }

       
        #mydiv {
        width: 280px;
        min-height: 380px;
        padding: 40px;
        box-sizing: border-box;
        border-radius: 12px;
        background:        Azure;
        box-shadow: 0 0 8px #000;
        position: absolute;
        left:50px;
        top:30px;
        z-index: 12;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
}
#mydiv::before {
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 10px;
        border: 2px dashed purple;
        border-radius: inherit;
}
#mydiv::after {
        content: '《我以为……》';
        padding: 10px 40px 10px 10px;
        left: -20px;
        top: 16px;
        border-radius: 10px 0 0 10px;
        background: LightBLue;
        opacity: .85;
        font: bold 20px/28px sans-serif;
        color: white;
        clip-path: polygon(0 0, 100% 0, 95% 45%, 100% 90%, 10% 90%, 5% 100%, 0 100%);
}
                css-doodle { position: absolute; }</style>
<div id="papa">
        <css-doodle grid="1" id="mplayer">      :doodle {@size: 160px;      position: absolute;      cursor: pointer;    right: 400px;    top: 190px;    z-index: 10;                     }      background: @doodle(               :doodle {      @grid: 3 ;                            @size: 160px;                            background: radial-gradient(SkyBlue,transparent 60%,transparent 0);                            cursor: pointer;                  }                   @shape:whale;                  @place: center;                  background: DarkOrange;                  transform: rotate(calc(@i * 40deg)) translate(60px);      );                  animation: rot 6s infinite linear var(--state);         @keyframes rot { to { transform: rotate(1turn); } }            </css-doodle>
        <div id="mydiv">
                <p>
                        <br />
                        <br /><br />
                        <img src="https://pic.imgdb.cn/item/647dedb01ddac507cc4ff9a9.gif" alt="" style="width: 100%" />
                </p>
                <p>
                        <br /><br />
                       ‍‍我以为，最美的日子，当是晨起侍花，闲来煮茶，阳光下打盹，细雨中漫步，夜灯下读书，在这清浅时光里，一手烟火一手诗意，任窗外花开花落，云来云往，自是余味无尽，万般自在。<br />
                        <br />
                        【图文来自网络】
                </p>
        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1858799530" autoplay="autoplay" loop="loop"></audio>
        <script>(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
        </script>

南无月 发表于 2023-6-6 18:56

@马黑黑 交份小贴子的作业。。。

马黑黑 发表于 2023-6-6 19:13

构思精巧，制作漂亮

红影 发表于 2023-6-6 19:33

月儿把边框放在帖子背景里了，也很不错的呢。小鲸鱼组成的连环也很漂亮。欣赏月儿好帖{:4_199:}

红影 发表于 2023-6-6 19:33

月儿的构思总是那么意想不到呢，太赞了{:4_199:}

千羽 发表于 2023-6-6 20:04

这么美的画面啊，我也是这么以为的{:4_173:}

千羽 发表于 2023-6-6 20:06

晚上好月儿{:4_187:}

梦缘 发表于 2023-6-6 20:47

好美的图，老师制作漂亮。{:4_204:}

南无月 发表于 2023-6-6 21:53

马黑黑 发表于 2023-6-6 19:13
构思精巧，制作漂亮

{:4_174:}先乐一个

南无月 发表于 2023-6-6 21:54

红影 发表于 2023-6-6 19:33
月儿把边框放在帖子背景里了，也很不错的呢。小鲸鱼组成的连环也很漂亮。欣赏月儿好帖

抄代码，我的水平影子门儿清{:4_170:}

马黑黑 发表于 2023-6-6 21:54

南无月 发表于 2023-6-6 21:53
先乐一个

巴适得板

南无月 发表于 2023-6-6 21:54

红影 发表于 2023-6-6 19:33
月儿的构思总是那么意想不到呢，太赞了

{:4_183:}过来抱一个

南无月 发表于 2023-6-6 21:55

千羽 发表于 2023-6-6 20:04
这么美的画面啊，我也是这么以为的

这么着的以为挺美的吧{:4_170:}

南无月 发表于 2023-6-6 21:55

千羽 发表于 2023-6-6 20:06
晚上好月儿

亲爱的千羽晚上好{:4_187:}

南无月 发表于 2023-6-6 21:55

梦缘 发表于 2023-6-6 20:47
好美的图，老师制作漂亮。

谢谢梦缘支持{:4_187:}

南无月 发表于 2023-6-6 22:05

马黑黑 发表于 2023-6-6 21:54
巴适得板

又地道又正宗{:4_170:}

马黑黑 发表于 2023-6-6 22:06

南无月 发表于 2023-6-6 22:05
又地道又正宗

反正没假

南无月 发表于 2023-6-6 22:12

马黑黑 发表于 2023-6-6 22:06
反正没假

那敢情好

马黑黑 发表于 2023-6-6 22:13

南无月 发表于 2023-6-6 22:12
那敢情好

好得不得了

千羽 发表于 2023-6-6 22:20

南无月 发表于 2023-6-6 21:55
这么着的以为挺美的吧

哈哈，英雄所见大同{:4_179:}

查看完整版本: 我以为……（学习黑师图文小贴子效果）