【梦里水乡】 致小九
本帖最后由 千羽 于 2022-3-17 22:13 编辑 <br /><br /><style>#bgBox { position:relative; left: -15px; width: 790px; height: 430px; background-image: url('https://www.huachaowang.com/data/attachment/forum/202203/17/200809nrs8sc1czrs8g861.jpg'); background-size: 790px 430px; background- ͼ
position: 790px 0; opacity: .96; animation: mv 28s linear infinite; }
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cursor: pointer;
position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .2);
width: 88px; height: 88px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red;
transform-origin: 0 0; animation: go 3s linear infinite; }
@keyframes go { to { transform: rotate(360deg);} }
@keyframes mv { from { background-position: 790px 0; } to { background-position: 0 0; } }
</style>
<div id="bgBox">
<div style="position: absolute; left:90px; top: 10px; width:688px;text-align:center;">
<img alt="" src=""/></div>
<div id="clkBtn" style="left: 20px; top: calc(100% - 120px);">
<div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?
id=369837.mp3" ></audio>
</div>
<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause
(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>
用的是影子的代码，忘了去掉雪花{:4_189:} 好美好美，谢谢羽儿{:4_183:} 我今天试过这个代码，应该是图片太大了，没有成功。 千羽 发表于 2022-3-17 19:51
用的是影子的代码，忘了去掉雪花
雪花也好美。要不把动图换这个？http://image.hnol.net/c/2020-12/25/09/20201225093830451-5088534.gif 千羽 发表于 2022-3-17 19:51
用的是影子的代码，忘了去掉雪花
去掉了{:4_205:} 羽儿好美的制作，清净淡雅，越看越美{:4_187:} 这个制作也好玩 千羽小仙女学习的真快，美美滴！小九收礼开心{:4_187:}{:4_190:} 红影 发表于 2022-3-17 19:59
雪花也好美。要不把动图换这个？
好的，影子吧地址给我 小九 发表于 2022-3-17 19:52
好美好美，谢谢羽儿
谢谢小九{:4_187:} 小九 发表于 2022-3-17 19:53
我今天试过这个代码，应该是图片太大了，没有成功。
估计是，换小图就好{:4_181:}了 千羽 发表于 2022-3-17 20:12
估计是，换小图就好了
回头再试试，我对代码比较迟缓{:5_117:} 红影 发表于 2022-3-17 20:00
羽儿好美的制作，清净淡雅，越看越美
影子，发现这图发出来颜色变淡了{:4_203:} 大猫咪 发表于 2022-3-17 20:03
这个制作也好玩 千羽小仙女学习的真快，美美滴！小九收礼开心
小猫咪也做个？只需换图和音乐就成了{:4_181:} 小九 发表于 2022-3-17 20:13
回头再试试，我对代码比较迟缓
嗯，我也是的，不懂代码{:4_173:} 千羽 发表于 2022-3-17 20:16
小猫咪也做个？只需换图和音乐就成了
嗯嗯 必须学习哈{:4_187:} 大猫咪 发表于 2022-3-17 20:19
嗯嗯 必须学习哈
对你来说是举手之劳，小事一桩{:4_181:} 千羽 发表于 2022-3-17 20:22
对你来说是举手之劳，小事一桩
要有喜欢的PP才有感觉做 {:5_117:}跟千羽学习的{:4_204:} 红影 发表于 2022-3-17 19:59
雪花也好美。要不把动图换这个？
这个也美{:4_187:} 大猫咪 发表于 2022-3-17 20:03
这个制作也好玩 千羽小仙女学习的真快，美美滴！小九收礼开心
谢谢猫咪，一起开心{:4_187:}