设计室

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

本帖最后由小九于 2022-3-17 10:34 编辑

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

漂亮的图图，羽儿收礼开心

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

图片好像没展示全？

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

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

点开才能看全，这个贴就用着试练了

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

好漂亮的图图，还能随着放大缩小。

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

本帖最后由小九于 2022-3-17 19:32 编辑

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

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

哦哦，看到九儿的正式帖了

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

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

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

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

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

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

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

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

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

小九 · 发表于 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

小九 · 发表于 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

小九 · 发表于 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;  }
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=1927231651.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-29 20:47

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

[其他] 设计室

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮美女

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

春风拂面

七彩绚丽

女儿情怀

相遇之美

花好月圆

心香一瓣

妙笔生花

共看流星

风雨同行

我心永远

天长地久

幸福快乐

梦幻浪漫

心想事成

开朗大方

指尖上的流年

花潮管理

海样胸怀

火热情怀

优雅迷人

神秘浪漫

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

活泼开朗

一往情深

紫色情节

飞龙在天

金剪刀

天籁妙音

绚丽缤纷

喜乐安康

中秋征文

周年庆

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

花潮帅哥

青草情怀

男儿情怀

鹰傲苍穹

春意盎然

麦霸歌神

两心相许