绿叶清舟 发表于 2022-8-24 17:15

【末伏消暑】九十天 早行

本帖最后由 绿叶清舟 于 2022-8-24 17:17 编辑 <br /><br /><style>
#papa { margin: auto; left: -250px; top: 80px;width: 1100px; height: 700px; background: #051850 url('https://pic.imgdb.cn/item/6305ec4716f2c2beb190e3cb.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }

#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(#bbc2cc,#68809a,#bbc2cc,#68809a,#bbc2cc); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: #051850; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>

<div id="papa">
      
      <div id="tit">早行</div>
      <div id="disc"></div>
</div>
<BR><BR><BR><BR><BR><BR>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();

aud.src = 'http://music.163.com/song/media/outer/url?id=1962085153.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

motion();

function motion() {
      moveX += stepX;
      moveY += stepY;
      mama.style.left = moveX + 'px';
      mama.style.top = moveY + 'px';
      requestAnimationFrame(motion);
      if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
      if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>

马黑黑 发表于 2022-8-24 17:43

早早早，树上有小鸟

红影 发表于 2022-8-24 18:53

画面真美。清舟的帖子里有些色彩很奇特，PS的妙用吧{:4_187:}

绿叶清舟 发表于 2022-8-24 20:15

马黑黑 发表于 2022-8-24 17:43
早早早，树上有小鸟

有虫吃了吧

绿叶清舟 发表于 2022-8-24 20:15

红影 发表于 2022-8-24 18:53
画面真美。清舟的帖子里有些色彩很奇特，PS的妙用吧

是啊 PS图层模式改变出来的效果了

马黑黑 发表于 2022-8-24 20:19

绿叶清舟 发表于 2022-8-24 20:15
有虫吃了吧

起得早就有

绿叶清舟 发表于 2022-8-24 20:21

马黑黑 发表于 2022-8-24 20:19
起得早就有

前提是虫也得早起啊

马黑黑 发表于 2022-8-24 20:21

绿叶清舟 发表于 2022-8-24 20:21
前提是虫也得早起啊

虫子都是早起的

绿叶清舟 发表于 2022-8-24 20:22

马黑黑 发表于 2022-8-24 20:21
虫子都是早起的

这虫也太笨了

樵歌 发表于 2022-8-24 21:11

这意境真好，到底是名牌呵！{:4_187:}

樵歌 发表于 2022-8-24 21:12

是“四十天”吧{:4_172:}

绿叶清舟 发表于 2022-8-24 21:18

樵歌 发表于 2022-8-24 21:12
是“四十天”吧

中间标点号掉了{:4_189:}

马黑黑 发表于 2022-8-24 22:14

绿叶清舟 发表于 2022-8-24 20:22
这虫也太笨了

安排好的

红影 发表于 2022-8-24 22:43

绿叶清舟 发表于 2022-8-24 20:15
是啊 PS图层模式改变出来的效果了

这些色彩太奇妙了{:4_187:}

樵歌 发表于 2022-8-25 18:15

绿叶清舟 发表于 2022-8-24 21:18
中间标点号掉了

木看出来啦{:4_173:}
页: [1]
查看完整版本: 【末伏消暑】九十天 早行