三月里的小雨 - 古筝 TO：马黑黑
<style type="text/css">.picBtn {
width: 100px;
height: 100px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif') no-repeat;
cursor: pointer;
</style>
<div style="position: relative; left:-410px; width:1400px;top: 150px; text-align:center;">
<img alt="" src="http://image.hnol.net/c/2022-03/03/00/202203030027218521-5087368.gif" style="box-shadow:1px 1px 2px #666; border:solid 1px #a6a9ab;" />
<div style="position:absolute; width:400px; left:820px; top: 480px; text-align:center;">
<center >
<p ><font color="#000000" size="4" >
<div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 2px #ffffff;">
<marqueescrollamount="4" direction="left" >谢谢黑黑的教程分享 小辣椒又瞎捣鼓了这个牛顿摆 </marquee>
<div style="position:absolute; width:400px; left:-380px; top: -120px; text-align:center;">
<p><audio id="music" src="https://s1.ananas.chaoxing.com/audio/b6/91/60/fc7efef42b7db6b51e94cf3dbbbb2007/audio.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<button id="picBtn" class="picBtn"></button>
</div>
</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-02/23/01/2022022301050291-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/202202230106029651-5087368.gif ')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/202202230106029651-5087368.gif ')";
})
</script>
<style>
#faDiv {
margin: 10px auto;
width: 150px;
height: 120px;
padding: 0;
border-top: 2px solid #000;
position: relative;
}
#faDiv div {
width: 1px;
height: 120px;
position: absolute;
top: 0;
background: #000;
transform-origin: 0 0;
}
#faDiv div::before {
content: "";
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
left: -10px;
top: 110px;
background: #000;
}
#faDiv div:nth-child(1){
left: 35px;
animation: zuobai 2s 0s ease-in infinite;
}
#faDiv div:nth-child(2){
left: 55px;
}
#faDiv div:nth-child(3){
left: 75px;
}
#faDiv div:nth-child(4){
left: 95px;
}
#faDiv div:nth-child(5){
left: 115px;
animation: youbai 2s 1s ease-in infinite;
}
@keyframes zuobai {
0% { transform: rotate(0deg); }
25% { transform: rotate(20deg); }
50% { transform: rotate(0deg); }
100% {}
}
@keyframes youbai {
0% { transform: rotate(0deg); }
25% { transform: rotate(-20deg); }
50% { transform: rotate(0deg); }
100% {}
}
</style>
<div id="faDiv" style="position: absolute;left: 170px;top: 330px;text-align: center;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<br><br><br><br><br><br><br><br><br>
@马黑黑
黑黑，谢谢你的这么多精彩分享{:4_187:} 亲爱的把这个牛顿摆放这里， 漂亮的。黑黑收礼开心{:4_187:} 这个小熊播放器也很有趣{:4_199:} 红影 发表于 2022-3-3 21:06
亲爱的把这个牛顿摆放这里， 漂亮的。黑黑收礼开心
亲爱的~~我开始放不进去，黑黑让我自己想办法，我就瞎捣鼓了{:4_173:} 红影 发表于 2022-3-3 21:06
这个小熊播放器也很有趣
哈哈，好玩的{:4_205:} 这个太美了，怎么不能评分啊 前世就认识啊？这缘分不浅。。。{:5_116:} 野渡无人舟自横，简介素雅，有意境。。。{:5_116:} 活学活用 绿叶清舟 发表于 2022-3-3 21:24
这个太美了，怎么不能评分啊
不能评分啊。我去看看 东篱闲人 发表于 2022-3-3 21:24
前世就认识啊？这缘分不浅。。。
哈哈，老头你太油墨了{:4_170:} 东篱闲人 发表于 2022-3-3 21:25
野渡无人舟自横，简介素雅，有意境。。。
老头网络素材，我只是加了个效果 马黑黑 发表于 2022-3-3 21:36
活学活用
黑黑，感觉这个牛顿摆放这个位置刚好{:4_173:} 马黑黑 发表于 2022-3-3 21:36
活学活用
这个效果加上去给图图增加了灵动感 小辣椒 发表于 2022-3-3 21:47
这个效果加上去给图图增加了灵动感
感觉不错 小辣椒 发表于 2022-3-3 21:46
黑黑，感觉这个牛顿摆放这个位置刚好
是的，非常理想 马黑黑 发表于 2022-3-3 21:51
感觉不错
是的，主要要和背景图颜色相吻合 马黑黑 发表于 2022-3-3 21:51
是的，非常理想
哈哈，成功是最开心的 辣椒这制作意境太棒了，春潮带雨晚来急，野渡无人舟自横。 融合的真漂亮
老黑收礼开心 ！
{:4_204:}{:4_190:}