大猫咪 发表于 2022-3-17 21:57

回外婆家 学习一下

本帖最后由 大猫咪 于 2022-3-19 11:19 编辑 <br /><br /><style>

#bgBox { position:relative; left: -5px; width: 286px; height: 385px; background-image: url('https://s3.bmp.ovh/imgs/2022/03/b2aaff2289e80ccf.gif'); 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=187076.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-17 22:29

猫猫这图图太温暖了，两只猫咪相依相伴的样子真可爱{:4_187:}

马黑黑 发表于 2022-3-17 22:29

我的华米表盘大放异彩{:4_170:}

这是猫咪回外婆家的动车路线

红影 发表于 2022-3-17 22:30

猫猫做得很成功，赞{:4_187:}

秀秀 发表于 2022-3-18 05:10

漂亮的猫咪

上海朝阳 发表于 2022-3-18 21:13

雷达扫描

杨柳青 发表于 2022-3-18 21:22

可爱的咪咪~~{:5_116:}

大猫咪 发表于 2022-3-18 21:23

红影 发表于 2022-3-17 22:29
猫猫这图图太温暖了，两只猫咪相依相伴的样子真可爱

哈哈谢谢红影支持鼓励 {:4_187:}学习老黑新代码，真好玩 {:4_173:}

大猫咪 发表于 2022-3-18 21:24

马黑黑 发表于 2022-3-17 22:29
我的华米表盘大放异彩

这是猫咪回外婆家的动车路线
嗯嗯老黑这就准备回家{:4_170:} 晚上好   {:4_179:}

大猫咪 发表于 2022-3-18 21:25

秀秀 发表于 2022-3-18 05:10
漂亮的猫咪

谢谢秀秀支持鼓励 {:4_187:}   晚上好 {:4_190:}

大猫咪 发表于 2022-3-18 21:25

上海朝阳 发表于 2022-3-18 21:13
雷达扫描

朝阳兄晚上好{:4_204:}{:4_180:}

大猫咪 发表于 2022-3-18 21:26

杨柳青 发表于 2022-3-18 21:22
可爱的咪咪~~

谢谢杨柳，周末快乐{:4_179:}

杨柳青 发表于 2022-3-18 21:32

大猫咪 发表于 2022-3-18 21:26
谢谢杨柳，周末快乐

周末一起快乐~~{:5_106:}

大猫咪 发表于 2022-3-18 21:37

杨柳青 发表于 2022-3-18 21:32
周末一起快乐~~

嗯嗯 必须的{:5_106:}{:4_204:}

杨柳青 发表于 2022-3-18 21:38

大猫咪 发表于 2022-3-18 21:37
嗯嗯 必须的

{:4_176:}

大猫咪 发表于 2022-3-18 21:39

杨柳青 发表于 2022-3-18 21:38


{:4_176:}干杯

杨柳青 发表于 2022-3-18 21:40

大猫咪 发表于 2022-3-18 21:39
干杯

{:4_205:}

绿叶清舟 发表于 2022-3-18 22:01

好温馨的感觉啊{:4_204:}

加林森 发表于 2022-3-18 23:27

怎么没有音乐呢？
猫猫制作得真漂亮。{:4_204:}{:4_190:}

红影 发表于 2022-3-19 10:05

大猫咪 发表于 2022-3-18 21:23
哈哈谢谢红影支持鼓励   学习老黑新代码，真好玩

猫猫找的图图都好看，非常温暖{:4_187:}
页: [1] 2
查看完整版本: 回外婆家 学习一下