晨曦

大猫咪 · 发表于 2022-3-23 20:42

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

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

x

本帖最后由大猫咪于 2022-4-16 21:21 编辑

晨曦

大猫咪 · 发表于 2022-3-23 21:01

清舟上面的字怎么换颜色，在那排

绿叶清舟 · 发表于 2022-3-23 21:07

日出天地正，这画面真美

绿叶清舟 · 发表于 2022-3-23 21:08

大猫咪发表于 2022-3-23 21:01
清舟上面的字怎么换颜色，在那排

color: #EEEE00;

绿叶清舟 · 发表于 2022-3-23 21:09

#baiBox {
      margin: auto;
      width: 360px;
      text-align: center;
      font-size: 2rem;
      font-weight: bold;
      color: #EEEE00;

绿叶清舟 · 发表于 2022-3-23 21:14

本帖最后由绿叶清舟于 2022-3-23 21:19 编辑

晨曦

大猫咪 · 发表于 2022-3-23 21:14

绿叶清舟发表于 2022-3-23 21:09
#baiBox {
margin: auto;
width: 360px;

OK

大猫咪 · 发表于 2022-3-23 21:16

绿叶清舟发表于 2022-3-23 21:14
再看看

字可以移动不

绿叶清舟 · 发表于 2022-3-23 21:22

大猫咪发表于 2022-3-23 21:16
字可以移动不

可以啊
<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 700px; background:#333 url('https://s3.bmp.ovh/imgs/2022/03/0cf7a87f3db81586.jpeg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;  }
body { overflow-x: hidden; } /*禁用横向滚动条 */
.faguang {
      margin: auto;
      background: #;
      width: 360px;
      height: 200px;
      line-height: 200px; /* 单行文本重置居中: 与height值相等 */
      color: #fff;
      font-size: 4em;
      text-align: center;
      text-shadow: 0 0 10px  #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000;
}

/* 动画 */
@keyframes yao {
      from{  transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
      width: 80px;
      height: 120px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif') no-repeat;
      cursor: pointer;
}
</style>

<div id="xq" >
      <div class="faguang" style="position: absolute; left:120px; top: 40px;">晨曦</div>
      <div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
            <img alt="" src="https://pic.imgdb.cn/item/622b46ee5baa1a80ab0a99ba.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 #008000;">
                     <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="音乐" ></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://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif')";
});
</script><br><br><br><br><br><br><br>