小九 发表于 2022-3-15 21:49

夜来香 （练习）

本帖最后由 小九 于 2022-3-16 12:59 编辑 <br /><br /><style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-304px; top:60px; width: 1200px; height: 737px; background:#333 url('/data/attachment/forum/202203/15/221507b1dd9d94qu44aq2d.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;  }
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
        margin: auto;
        width: 360px;
        text-align: center;
        font-size: 5rem;
        font-weight: bold;
        color: #EEEE00;
        transform-origin: top;
        animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
        from{  transform: perspective(800px) rotatex(30deg); }
        to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
        width: 0px;
        height: 0px;
        border: none;
        outline: none;
        border-radius: 0px;
        background: transparent url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif') no-repeat;
        cursor: pointer;
}
</style>

<div id="xq" >
        <div id="baiBox" style="position: absolute; left:120px; top: 40px; "></div>
        <div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
                <img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
                <div style="position:absolute; width:260px; left:560px; top: 10px; text-align:center;padding:10px;font-size:1em;font-family:'微软雅黑';text-shadow:1px 1px 2px #000;">
                        <marquee  scrollamount="5" direction="left" > </marquee>
                </div>
        </div>
        <!-- 控制按钮应是父盒子的第一代子元素 -->
        <div style="position:absolute; width:120px; left: 10px; top:calc(100% - 140px); text-align:center;">
                <button id="picBtn" class="picBtn"></button>
        </div>
</div>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=225871.mp3" ></audio>

加林森 发表于 2022-3-15 21:52

小九把帖提提，不能评分了。这个制作得真漂亮。{:4_199:}

小九 发表于 2022-3-15 21:54

加林森 发表于 2022-3-15 21:52
小九把帖提提，不能评分了。这个制作得真漂亮。

该怎么提？    字么有移动

大猫咪 发表于 2022-3-15 21:56

恭喜小九成功了{:4_187:}好听又好看，赞！！！


{:4_204:}

绿叶清舟 发表于 2022-3-15 22:00

小九 发表于 2022-3-15 21:54
该怎么提？    字么有移动

代码最后多加几个换行代码

绿叶清舟 发表于 2022-3-15 22:00

制作漂亮，赞个{:4_204:}

小九 发表于 2022-3-15 22:06

绿叶清舟 发表于 2022-3-15 22:00
代码最后多加几个换行代码

换行代码是什么呢？

马黑黑 发表于 2022-3-15 22:22

/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; 。。。。

这里，top 是帖子外框上边缘的位置设定，120太高了，调小一点，有时候可以不要脸的

红影 发表于 2022-3-15 22:39

马黑黑 发表于 2022-3-15 22:22
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; 。。。。



我记得还可以用设置最小高度来调整的吧？

红影 发表于 2022-3-15 22:39

这个制作真棒，好看。欣赏九儿好帖{:4_187:}

马黑黑 发表于 2022-3-15 22:42

红影 发表于 2022-3-15 22:39
我记得还可以用设置最小高度来调整的吧？

也可以的

加林森 发表于 2022-3-15 23:13

恭喜小九，成功了！{:4_199:}

樵歌 发表于 2022-3-16 07:55

小九也学会了呵，真敏捷。{:4_187:}

红影 发表于 2022-3-16 12:49

马黑黑 发表于 2022-3-15 22:42
也可以的

只是总想不起来用这个功能{:4_173:}

马黑黑 发表于 2022-3-16 12:51

红影 发表于 2022-3-16 12:49
只是总想不起来用这个功能

正常

马黑黑 发表于 2022-3-16 12:51

@小九 ，还可以左移一点

小九 发表于 2022-3-16 12:59

马黑黑 发表于 2022-3-16 12:51
@小九 ，还可以左移一点

好的，再调整一下

马黑黑 发表于 2022-3-16 13:05

小九 发表于 2022-3-16 12:59
好的，再调整一下

瞧，现在效果特好
页: [1]
查看完整版本: 夜来香 （练习）