[陈心蕊]花季年龄_DJ慢摇嗨曲 TO：马黑黑
本帖最后由 加林森 于 2022-1-18 12:20 编辑 <br /><br /><style type="text/css">.mBox {
position: relative;
left: -304px;
top: 100px;
width: 1200px;
min-height: 300px;
box-shadow: 2px 2px 4px 1pxrgba(0,0,0,.2);
background: transparent;
}
.sBox {
background: #FFC0CB;
text-align: center;
}
.sBox h2, p { padding: 10px; }
.marq {
margin: 10px auto;
position: relative;
top: -220px;
left: -60px;
width: 50%;
animation: goNow 10s linear infinite alternate;
}
@keyframes goNow {
from { transform: translate(0,0); }
to { transform: translateX(-50%); }
}
.btnDiv {
position: relative;
width: 32px;
height: 32px;
border: none;
background: #FFC0CB;
border-radius: 50%;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
cursor: pointer;
}
.btnDiv:hover {
opacity: .8;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
}
.btnDiv:active {
opacity: .8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
}
.btn-play {
position: absolute;
width: 0px;
height: 0px;
border: 10px solid #000;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#eee;
left: 12px;
top: 6px;
}
.btn-pause {
position: absolute;
display:none;
width: 2px;
height: 20px;
border-right: 4px solid #eee;
border-bottom:0px;
border-left: 4px solid #eee;
left: 11px;
top: 6px;
}
</style>
<div class="mBox">
<div class="sBox">
<img src="https://www.80wp.com/wj/3015592/bf2d87f673d2cd18bc206c616896c9c7.jpg" alt="" />
</div>
</div>
<h2 class ="marq">[陈心蕊]花季年龄_DJ慢摇嗨曲</h2>
<audio id="ymusic" src="https://www.80wp.com/wj/3015495/6054b3224dde6771f310106407f928d0.mp3"></audio>
<div id="btnDiv" class="btnDiv">
<div id="btn-play" class="btn-play"></div>
<div id="btn-pause" class="btn-pause"></div>
</div>
<script language="javascript">
var mu = document.getElementById('ymusic');
var btn = document.getElementById('btnDiv');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); })
function iplay(flag){
if(flag==1){
mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
}else{
playbtn.style.display= "block";
pausebtn.style.display = "none";
}
}
</script>
@马黑黑 我这个播放器的字怎么跑上面去了啊？{:4_203:} 加林森 发表于 2022-1-18 11:05
我这个播放器的字怎么跑上面去了啊？
没定位好。试着修改一下定位，这个不难的。CSS里 .marq 选择器 马黑黑 发表于 2022-1-18 11:14
没定位好。试着修改一下定位，这个不难的。CSS里 .marq 选择器
伤脑筋。搞不定了。有点笨哈。你帮着改一改，好不好？{:4_190:} .marq {
margin: 10px auto;
position: relative;
top: -620px;
left: -120px;
width: 50%;
animation: goNow 10s linear infinite alternate;
}
看红色部分，top 和 left 值改一下。帖子现在的效果是往上了，top值改小一点，left好像也不合适，也要改改。你那那么像素尺量一量，然后大致算算再改。
马黑黑 发表于 2022-1-18 11:29
.marq {
margin: 10px auto;
position: relative;
谢谢老黑，现在下来了。挺好看的。{:4_190:} 加林森 发表于 2022-1-18 11:36
谢谢老黑，现在下来了。挺好看的。
嗯，不错的 马黑黑 发表于 2022-1-18 11:40
嗯，不错的
谢谢老黑帮助。{:4_190:} 队长这个制作很漂亮{:4_199:} 马黑黑 发表于 2022-1-18 11:40
嗯，不错的
黑黑收礼开心 小辣椒 发表于 2022-1-18 12:16
队长这个制作很漂亮
跟马老师学习的，才制作出来的。{:4_189:} 小辣椒 发表于 2022-1-18 12:16
黑黑收礼开心
一同开心 马黑黑 发表于 2022-1-18 12:38
一同开心
现在播放器的颜色改变成了粉红色的了。 恭喜队长制作成功，这个好看{:4_187:} 红影 发表于 2022-1-18 13:13
恭喜队长制作成功，这个好看
哈哈，终于成功了。都可以改变颜色的。谢谢红影支持。{:4_190:}{:4_187:} 加林森 发表于 2022-1-18 13:22
哈哈，终于成功了。都可以改变颜色的。谢谢红影支持。
是啊，这个非常适合想做自己颜色的帖子。 红影 发表于 2022-1-18 14:54
是啊，这个非常适合想做自己颜色的帖子。
就是，老黑专版里的颜色代码真好。 加林森 发表于 2022-1-18 12:56
现在播放器的颜色改变成了粉红色的了。
队长喜欢粉色？ 马黑黑 发表于 2022-1-18 17:48
队长喜欢粉色？
是与图片接近的播放器。