晨曦
本帖最后由 大猫咪 于 2022-4-16 21:21 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-204px; top:10px; 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; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 360px;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #FF4500;
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: 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 id="baiBox" style="position: absolute; left:60px; 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;">
<marqueescrollamount="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=3158404.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://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>
清舟上面的字怎么换颜色，在那排{:4_187:} 日出天地正，这画面真美{:4_204:} 大猫咪 发表于 2022-3-23 21:01
清舟上面的字怎么换颜色，在那排
color: #EEEE00; #baiBox {
margin: auto;
width: 360px;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #EEEE00; 本帖最后由 绿叶清舟 于 2022-3-23 21:19 编辑 <br /><br /><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;">
<marqueescrollamount="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>
绿叶清舟 发表于 2022-3-23 21:09
#baiBox {
margin: auto;
width: 360px;
OK {:5_106:} 绿叶清舟 发表于 2022-3-23 21:14
再看看
字可以移动不 大猫咪 发表于 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;">
<marqueescrollamount="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>
大猫咪 发表于 2022-3-23 21:16
字可以移动不
<div class="faguang" style="position: absolute; left:120px; top: 40px;">晨曦</div> 绿叶清舟 发表于 2022-3-23 21:31
晨曦
谢谢清舟{:4_204:}{:4_179:} 这个意境好美啊，大雁的动图也用得好，让画面多了灵动。猫猫真棒{:4_199:} 红影 发表于 2022-3-23 21:48
这个意境好美啊，大雁的动图也用得好，让画面多了灵动。猫猫真棒
谢谢红影 {:5_106:}{:4_187:} 也只会这点了哈哈 还的学习后面的 {:4_179:} 猫做得图图都非常清朗明快，真是图如其人也。{:4_190:} 大猫咪 发表于 2022-3-23 21:50
谢谢红影也只会这点了哈哈 还的学习后面的
这个画面和色彩特别喜欢，猫猫真是太棒了{:4_199:} 樵歌 发表于 2022-3-24 07:49
猫做得图图都非常清朗明快，真是图如其人也。
谢谢樵哥哥支持鼓励中午好 {:4_187:}{:4_179:} 红影 发表于 2022-3-24 09:59
这个画面和色彩特别喜欢，猫猫真是太棒了
谢谢红影支持鼓励 开心{:4_204:}{:4_179:} 大雁的动画好美！ 和画面完美结合！真棒！{:4_199:} 大猫咪 发表于 2022-3-24 12:44
谢谢樵哥哥支持鼓励中午好
来享受的，还得接受谢意，樵哥哥不是官老爷哈。{:4_173:} 大猫咪 发表于 2022-3-24 12:45
谢谢红影支持鼓励 开心
猫猫的帖子越做越好了{:4_187:}