《思念如夜幕》 --九千七 （根据老黑教程制作）
本帖最后由 加林森 于 2022-3-17 12:26 编辑 <br /><br /><style>.myBox {
--w: 760px;
width: var(--w);
height: 200px;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: var(--w) 100px;
background-position: var(--w) 0;
border: 1px solid;
animation: chgc 2s linear infinite;
}
@keyframes chgc {
from { background-position: var(--w) 0; }
to { background-position: 0 0; }
}
</style>
<div class="myBox"><style>
#bgBox { position:relative; left: -5px; width: 770px; height: 433px; background-image: url('https://pic.imgdb.cn/item/623166325baa1a80abbfb0ed.jpg'); background-size: 770px 433px; background-position: 770px 0; opacity: .75; animation: mv 5s 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: -770px 0; } to { background-position: 0 0; } }
</style>
<div id="bgBox">
<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=1909093941.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></div></div></div></div>
@马黑黑 @红影 成功 马黑黑 发表于 2022-3-16 12:52
成功
谢谢老黑。{:4_204:} 加林森 发表于 2022-3-16 12:59
谢谢老黑。
想达到无缝衔接的背景变化效果，请移步：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57836&extra=page%3D1 马黑黑 发表于 2022-3-16 13:07
想达到无缝衔接的背景变化效果，请移步：
https://www.huachaowang.com/forum.php?mod=viewthread&tid ...
谢谢老黑，我看见了，真漂亮，衔接得真好。 加林森 发表于 2022-3-16 13:12
谢谢老黑，我看见了，真漂亮，衔接得真好。
图片就不好找，最好自己会PS或其他工具，加工一下图片 马黑黑 发表于 2022-3-16 13:15
图片就不好找，最好自己会PS或其他工具，加工一下图片
我有PS与秀秀软件的，只是PS好久没有用过了，有点手生了。 加林森 发表于 2022-3-16 13:22
我有PS与秀秀软件的，只是PS好久没有用过了，有点手生了。
秀秀也可以的 马黑黑 发表于 2022-3-16 13:31
秀秀也可以的
是的，我平时都用秀秀的。 加林森 发表于 2022-3-16 13:32
是的，我平时都用秀秀的。
秀秀相对简单，功能也不弱 马黑黑 发表于 2022-3-16 13:33
秀秀相对简单，功能也不弱
就是，挺好用的。 队长的制作真漂亮，恭喜试验成功{:4_187:} 红影 发表于 2022-3-16 13:39
队长的制作真漂亮，恭喜试验成功
谢谢红影支持！我已经修改好了一个帖，现在去修改最后一个帖。{:4_204:} 加林森 发表于 2022-3-16 13:52
谢谢红影支持！我已经修改好了一个帖，现在去修改最后一个帖。
队长辛苦{:4_187:} 红影 发表于 2022-3-16 14:31
队长辛苦
不辛苦，自己喜欢折腾的。{:4_189:} 加林森 发表于 2022-3-16 14:32
不辛苦，自己喜欢折腾的。
越折腾，功力就会越长，很不错的呢{:4_187:} 红影 发表于 2022-3-16 14:34
越折腾，功力就会越长，很不错的呢
就是就是，反正没有事情，我就玩玩吧。{:4_189:} 加林森 发表于 2022-3-16 13:35
就是，挺好用的。
可惜我不会 马黑黑 发表于 2022-3-16 18:25
可惜我不会
老黑谦虚啊
页:
[1]
2