本帖最后由 加林森 于 2021-12-23 16:49 编辑 <br /><br />红影 发表于 2021-10-18 19:42
改不掉了，估计下回还得错
发出来之前看看就行了
<div style="margin:4px auto;width:700px;border:solid 2px #ffcc00; background:#fff; border-radius:40px;">
<p style="text-align:center;"><img style="width:550px;height:467px;" src="https://www.80wp.com/wj/3015084/88d479dd98f0f09af4633ae061295d3d.gif" /></p>
<h1 style="color:#000;font-family:微软雅黑; font-size:20px;text-align:center;">《那拉提的养蜂女》</h1>
<p style="text-align:center;font-family:微软雅黑;color:#000;">TO：马黑黑</p>
<pre style="font-family:微软雅黑;font-size:16px;">
歌曲歌词
伊犁的雨水
织不出对你的思念
那拉提的风雪
诉说对你的亏欠
如果不曾和你相遇
回忆不会视而不见
我们曾在可可托海许下的诺言
空荡的毡房
再听不到你拨的琴弦
杏花沟的花
采不出你给的香甜
如果不曾和你相遇
回忆不会视而不见
漂泊的路你曾是我以为的终点
远方的心上人
我把心留给你给了你
北归的鸿雁一声声叫着哀愁
是我在和你说忘了我
远方的心上人
请你不要再等我再等我
喝下手里这杯伤心的马奶酒
请你忘记这红尘忘了我
远方的心上人
我把心留给你给了你
北归的鸿雁一声声叫着哀愁
是我在和你说忘了我
远方的心上人
请你不要再等我再等我
喝下手里这杯伤心的马奶酒
请你忘记这红尘忘了我
</pre>
<p style="text-align:right;">加林森 2021.12.23 <br> </p>
<p style="text-align:left;"> <audio style="width:80px;height:54px;" controls="controls" autoplay="autoplay" loop="loop" src="https://www.80wp.com/wj/3007308/e791d2acd2a68ae0e94ed9d21c4cbaac.mp3 " type="audio/mpeg"></audio></p>
</div>
本帖最后由 加林森 于 2022-3-31 18:03 编辑 <br /><br />红影 发表于 2021-10-18 19:42
改不掉了，估计下回还得错
没关系啊
<style type="text/css">
/* 帖子容器 */
#tzDiv {
position: relative;
left: -214px;
width: 1024px;
height: 600px;
top: 80px;
background: #eee url('https://pic.imgdb.cn/item/624571e627f86abb2a58bcf1.jpg') no-repeat center/cover;
opacity: 0.8;
}
/* 音乐控制按钮 */
.picBtn {
position: absolute;
width: 100px;
height: 100px;
left: 180px;
bottom: 60px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/622a00ea5baa1a80ab412ada.gif') no-repeat;
cursor: pointer;
}
/* 文本时钟 */
#textClock {
position: absolute;
top: 180px;
right: 200px;
width: 300px;
height: 30px;
font: 20px / 30px Sans-Serif;
text-align: center;
}
/* 走马灯父框 */
.txtFly {
position: absolute;
width: 260px;
height: 30px;
right: 100px;
bottom: 100px;
overflow: hidden;
}
/* 走马灯文本 */
.txtFly div {
position: absolute;
left: 260px;
font: normal 18px /20px Sans-Serif;
word-break: keep-all;
white-space:nowrap;
}
/* 变色文本 */
.txtBg {
position: absolute;
top: 80px;
right: 100px;
font-size: 4rem;
color: transparent;
width: 500px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: 500px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
/* 文本变色动画 */
@keyframes chgc {
from { background-position: -500px 0; }
to { background-position: 0 0; }
}
</style>
<div id="tzDiv">
<div class="txtBg">在他乡</div>
<div id="textClock"></div>
<div class="txtFly">
<div id="ziFly">在他乡 - 程响 我多想回到家乡
再回到她的身旁
看她的温柔善良
来抚慰我的心伤
那一夜。。。。。。</div>
</div>
<button id="picBtn" class="picBtn"></button>
<audio id="music" src="http://music.163.com/song/media/outer/url?id=1915191923.mp3" loop="loop" autoplay="autoplay" ></audio>
</div>
<script language="javascript">
fly(); //运行走马灯
showTime(); //显示时间
setInterval(showTime, 1000); //运行时钟
//文本时钟函数
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;
document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num) { var hz = "日一二三四五六九"; return(hz.charAt(num)); }
//音乐控制代码
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/622a00ea5baa1a80ab412ada.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')";
});
//创建走马灯
function fly() {
var ziFly = document.getElementById('ziFly');
var width = ziFly.clientWidth;
var style = document.createElement('style');
style.type = 'text/css';
var flyStr = '@keyframes fly {to { left: -' + width + 'px; } }';
style.innerHTML = flyStr;
ziFly.appendChild(style);
ziFly.style.animation = 'fly 40s linear infinite';
}
</script>
加林森 发表于 2021-10-18 19:49
发出来之前看看就行了
是的，下回我多留意一下{:4_204:}
加林森 发表于 2021-10-17 21:57
这是什么动作啊~~~~~~
本帖最后由 加林森 于 2022-1-2 11:37 编辑 <br /><br />红影 发表于 2021-10-18 20:32
是的，下回我多留意一下
嗯嗯
<style type="text/css">
.dongli {
width:100%; height:400px; padding:10px;
background:url('https://www.80wp.com/wj/3015084/88d479dd98f0f09af4633ae061295d3d.gif') no-repeat right bottom, linear-gradient(300deg,coral,red,orange,blue,yellow,pink,green);
}
</style>
<div class="dongli"></div>
杨柳青 发表于 2021-10-23 21:19
这是什么动作啊~~~~~~
你又怎么了？
加林森 发表于 2021-10-23 21:57
你又怎么了？
{:4_203:}
杨柳青 发表于 2021-10-23 22:00
皮痒了？