默 -- 简弘亦 (移动图片)
本帖最后由 加林森 于 2022-3-19 12:45 编辑 <br /><br /><style>#bgBox { position:relative; left: -15px; width: 790px; height: 430px; background-image: url('https://pic.imgdb.cn/item/6233f4f75baa1a80abd87a54.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://www.kumeiwp.com/sub/filestores/2022/03/18/a8cd30d007cff874d38809d2c4c4a19d.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> 本帖最后由 加林森 于 2022-3-18 23:40 编辑
@东篱闲人 @马黑黑 @红影 那只鹰哪去了?我是说有那只鹰的时候做动图漂亮,好像鹰在穿越山水{:4_173:} 成功 加加,干的漂亮!{:5_116:} 图片可以简单处理一下,让两边对称,这样出来效果会浑然一体。。。{:4_190:} 红影 发表于 2022-3-19 08:33
那只鹰哪去了?我是说有那只鹰的时候做动图漂亮,好像鹰在穿越山水
鹰太大了,放不进去。我看看能不能去找一个小鹰出来。 马黑黑 发表于 2022-3-19 09:01
成功
谢谢老黑。{:4_190:} 东篱闲人 发表于 2022-3-19 10:06
加加,干的漂亮!
谢谢老兄支持。{:4_190:} 东篱闲人 发表于 2022-3-19 10:07
图片可以简单处理一下,让两边对称,这样出来效果会浑然一体。。。
我该怎么搞?我还准备放一只小鹰进去,不知道行不行呢。 加林森 发表于 2022-3-19 10:26
鹰太大了,放不进去。我看看能不能去找一个小鹰出来。
不大啊,那个鹰我也有收藏过的,看你前面一个帖子,那个鹰根本就不算大。 红影 发表于 2022-3-19 11:07
不大啊,那个鹰我也有收藏过的,看你前面一个帖子,那个鹰根本就不算大。
我现在放不进去了 红影 发表于 2022-3-19 11:07
不大啊,那个鹰我也有收藏过的,看你前面一个帖子,那个鹰根本就不算大。
是不是我的代码没有对呢?真奇怪。 加林森 发表于 2022-3-19 10:26
谢谢老黑。
客气了 马黑黑 发表于 2022-3-19 11:25
客气了
应该的 加林森 发表于 2022-3-19 10:28
我该怎么搞?我还准备放一只小鹰进去,不知道行不行呢。
图片做一下虚化处理。 东篱闲人 发表于 2022-3-19 19:10
图片做一下虚化处理。
我不是PS,我用的是秀秀软件。 加林森 发表于 2022-3-19 19:25
我不是PS,我用的是秀秀软件。
嗯嗯嗯。。{:4_190:} 东篱闲人 发表于 2022-3-19 19:30
嗯嗯嗯。。
快去看你师傅小辣椒发的帖吧。 加林森 发表于 2022-3-19 11:09
是不是我的代码没有对呢?真奇怪。
照你原来那个帖子里的位置放就可以了啊,是改底图成动的,又不需要改鹰{:4_173:}
页:
[1]
2