【雪落下的声音】- 锦姑娘（根据马黑黑纯CSS制作）
本帖最后由 加林森 于 2022-1-18 17:37 编辑 <br /><br /><style type="text/css">.mnBox {
margin: 0 auto;
padding: 35px;
width: 720px;
border: none;
border-top: 6px solid #000;
border-radius: 10px;
background: #FFF0F5;
}
.ctBox {
margin: 0;
padding: 10px;
background: #FFF0F5;
min-height: 300px;
border-radius: 10px;
box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}
.ctBox p,img, h2,button { text-align:center; }
.picBtn {
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background: transparent url(' src="https://pic.imgdb.cn/item/61e4f30a2ab3f51d91dbd79e.gif') no-repeat;
cursor: pointer;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}
.picBtn:hover {
opacity: 0.95;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}
.picBtn:active {
opacity: 0.8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}
</style>
<div class="mnBox">
<div class="ctBox">
<p> <img src="https://pic.imgdb.cn/item/61e4f30a2ab3f51d91dbd79e.gif"></p>
<p><img alt="" src=""https://pic.imgdb.cn/item/61e4f30a2ab3f51d91dbd79e.gif"> </p>
<h2 style="text-align:center;">【雪落下的声音】- 锦姑娘</h2>
<pre>
【雪落下的声音】
轻轻，落在我掌心，
静静，在掌中结冰。
相逢，是前世注定，
痛并，把快乐尝尽。
明明，话那么寒心，
假装，那只是叮咛。
泪尽，也不能相信，
此生，如纸般薄命。
我慢慢地听，雪落下的声音，
闭着眼睛幻想它不会停，
你没法靠近，决不是太薄情，
只是贪恋窗外的好风景。
我慢慢地品，雪落下的声音，
仿佛是你贴着我叫卿卿，
睁开了眼睛，漫天的雪无情
谁来赔这一生的好光景？
明明，话那么寒心，
假装，那只是叮咛。
泪尽，也不能相信，
此生，如纸般薄命。
我慢慢地听，雪落下的声音，
闭着眼睛幻想它不会停，
你没法靠近，决不是太薄情，
只是贪恋窗外的好风景。
我慢慢地品，雪落下的声音，
仿佛是你贴着我叫卿卿，
睁开了眼睛，漫天的雪无情
谁来赔这一生的好光景？
谁来赔这一生的好光景？
谁来赔这一生的好光景。
</pre>
<p><audio id="music"src="https://www.80wp.com/wj/3015575/e678be82332a9775780d6dcbff7b96a2.mp3"></audio></p>
<p><button id="picBtn" class="picBtn"></button></p>
<p>加里森 2022- 01-17</p>
</div>
</div>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-01/16/15/202201161501412221-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-01/16/15/202201161501092411-5087368.gif ')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-01/16/15/202201161501092411-5087368.gif')";
})
</script> @马黑黑@小辣椒@红影@大猫咪 很不错 队长开始的播放按钮怎么是白板，按下去后才变成按钮的样子。 马黑黑 发表于 2022-1-17 13:54
很不错
谢谢老黑支持！{:4_190:} 红影 发表于 2022-1-17 13:54
队长开始的播放按钮怎么是白板，按下去后才变成按钮的样子。
可能是没有上色吧。 加林森 发表于 2022-1-17 16:56
谢谢老黑支持！
谢茶 马黑黑 发表于 2022-1-17 17:33
谢茶
谢谢你老黑。我又根据你的代码重新制作了一个新的出来。你帮着我看看。{:4_190:} 加林森 发表于 2022-1-17 17:45
谢谢你老黑。我又根据你的代码重新制作了一个新的出来。你帮着我看看。
刚看 马黑黑 发表于 2022-1-17 17:45
刚看
好的好的 加林森 发表于 2022-1-17 16:57
可能是没有上色吧。
应该还是有点问题。 红影 发表于 2022-1-17 20:49
应该还是有点问题。
我没有修改的，原汁原味的。{:4_189:} 加林森 发表于 2022-1-17 20:52
我没有修改的，原汁原味的。
奇怪，为什么开始是白色的按钮，这里面肯定有什么地方有问题的。 红影 发表于 2022-1-17 22:19
奇怪，为什么开始是白色的按钮，这里面肯定有什么地方有问题的。
是雪覆盖的吧{:4_170:} 马黑黑 发表于 2022-1-17 23:12
是雪覆盖的吧
对头{:4_189:} 加林森 发表于 2022-1-18 09:35
对头
2022第一场雪厉害 马黑黑 发表于 2022-1-18 09:40
2022第一场雪厉害
我们这里没有下雪，就下了点雨的。 加林森 发表于 2022-1-18 09:44
我们这里没有下雪，就下了点雨的。
挺冷的吧 马黑黑 发表于 2022-1-18 09:50
挺冷的吧
阴冷阴冷的。这几天还不错，天天都是大太阳，温暖得很。 加林森 发表于 2022-1-18 09:52
阴冷阴冷的。这几天还不错，天天都是大太阳，温暖得很。
我这恰好相反