论坛 › 时光如水 › 设计室

小九 发表于 2022-3-16 17:47

设计室

{:5_117:}

小九 发表于 2022-3-16 17:50

本帖最后由 小九 于 2022-3-17 10:34 编辑 <br /><br />{:4_190:}

红影 发表于 2022-3-16 18:17

漂亮的图图，羽儿收礼开心{:4_187:}

红影 发表于 2022-3-16 18:21

图片好像没展示全？

小九 发表于 2022-3-16 18:49

红影 发表于 2022-3-16 18:21
图片好像没展示全？

点开才能看全，这个贴就用着试练了{:4_187:}

樵歌 发表于 2022-3-16 20:25

好漂亮的图图，还能随着放大缩小。{:4_187:}

小九 发表于 2022-3-17 10:37

本帖最后由 小九 于 2022-3-17 19:32 编辑 <br /><br />{:4_190:}

红影 发表于 2022-3-17 15:32

小九 发表于 2022-3-16 18:49
点开才能看全，这个贴就用着试练了

哦哦，看到九儿的正式帖了{:4_187:}

小九 发表于 2022-3-17 19:35

本帖最后由 小九 于 2022-3-20 22:45 编辑 <br /><br />{:4_190:}

顾-念 发表于 2022-3-19 20:44

这是设计去远方么。最后这张图有感觉

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

顾-念 发表于 2022-3-19 20:44
这是设计去远方么。最后这张图有感觉

这个贴转门用来设计图片，然后发帖用，就相当于 练习本吧，这样好理解一些。{:5_117:}

小九 发表于 2022-3-20 17:27

{:4_190:}

小九 发表于 2022-3-20 20:40

{:4_190:}

小九 发表于 2022-3-20 22:49

本帖最后由 小九 于 2022-3-28 18:42 编辑

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-395px; top:50px; width: 1400px; height: 860px; background:#333 url('/data/attachment/forum/202203/20/224544x0fifflhp3ffnejh.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:400px; 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=29806130.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('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
        btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script>
</script>
</script>
</script>
</script>
</script>
</script>
</script>

小九 发表于 2022-3-28 14:50

{:4_204:}

小九 发表于 2022-3-28 18:42

本帖最后由 小九 于 2022-3-28 20:20 编辑

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-395px; top:50px; width: 1400px; height: 860px; background:#333 url('/data/attachment/forum/202203/28/145026j6br79j6u92er3ee.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:400px; 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=473285827.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('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
        btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script>
</script>
</script>
</script>
</script>
</script>
</script>
</script>

小九 发表于 2022-3-28 20:16

{:4_190:}

小九 发表于 2022-3-28 20:19

本帖最后由 小九 于 2022-4-1 16:37 编辑

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-395px; top:50px; width: 1400px; height: 860px; background:#333 url('/data/attachment/forum/202203/28/201624re0i4yii07rii306.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;&nbsp;&nbsp;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;margin: auto;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;width: 360px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;text-align: center;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;font-size: 5rem;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;font-weight: bold;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;color: #EEEE00;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;transform-origin: top;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;from{&nbsp;&nbsp;transform: perspective(800px) rotatex(30deg); }
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;width: 0px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;height: 0px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;border: none;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;outline: none;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;border-radius: 0px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;background: transparent url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif') no-repeat;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;cursor: pointer;
}
</style>

<div id="xq" >
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<div id="baiBox" style="position: absolute; left:120px; top: 40px; "></div>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<div style="position: absolute; left:400px; top: 150px; width:400px;text-align:center;">
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; <img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; <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;">
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<marquee&nbsp;&nbsp;scrollamount="5" direction="left" > </marquee>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; </div>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</div>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<!-- 控制按钮应是父盒子的第一代子元素 -->
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<div style="position:absolute; width:120px; left: 10px; top:calc(100% - 140px); text-align:center;">
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; <button id="picBtn" class="picBtn"></button>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</div>
</div>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1927231651.mp3" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script>
</script>
</script>
</script>
</script>
</script>
</script>
</script>

小九 发表于 2022-3-29 20:47

{:4_190:}

小九 发表于 2022-4-1 16:33

{:4_190:}

查看完整版本: 设计室