东篱闲人 发表于 2022-5-7 12:53

套一下加加这个代码。。。

本帖最后由 东篱闲人 于 2022-5-8 12:40 编辑 <br /><br /><style>
.outer { left: -400px; width: 1400px; height: 800px; background: linear-gradient(45deg, green, green), url('https://s1.ax1x.com/2022/05/06/OKBU2D.jpg') no-repeat center/cover; background-blend-mode: overlay, normal; filter: drop-shadow(0 0 10px gray); opacity: .95; position: relative; }
.outer h2 { margin: 0; position: absolute; left: 80%; top: 10px; font: bold 1.5em sans-serif; color: teal; text-shadow: 1px 1px 2px #222; }
.spic { position: absolute; width: 400px; height: 400px; top: 100px; mix-blend-mode: multiply; }
.r-small { position: absolute; width: 50px; height: 50px; border-radius: 50%; top: calc(63% - 63px); left: calc(56% - 56px); cursor: pointer; text-align: center; animation: rot 6s linear infinite; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="outer">
      <h2>烟雨草堂作品</h2>
      <img class="spic" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" />
      <div class="outer r-small"></div>
</div>

<script>
let flag = true;
let ele = document.querySelector('.r-small');
let au = document.createElement('audio');
au.src = 'http://music.163.com/song/media/outer/url?id=1908029964.mp3';
au.loop = true;
au.autoplay = flag;
au.style.display = 'none';
ele.appendChild(au);
if(!flag) ele.style.animationPlayState = 'paused';
ele.onclick = function() { flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true); }
</script>

东篱闲人 发表于 2022-5-7 12:54

还能变色？{:5_115:}

大猫咪 发表于 2022-5-7 13:21

哈哈老头这个变色的也特别漂亮   2只蝴蝶加的真棒！赞    {:4_204:}{:4_179:}

梦油 发表于 2022-5-7 13:36

曲好图美！

加林森 发表于 2022-5-7 13:53

老兄，别惆怅了，我已经给你加精了。。。。{:4_172:}

红影 发表于 2022-5-7 13:55

真漂亮。这个有线性渐变，当然变色啊。东篱大哥可以调整变色的颜色，得到自己想要的效果{:4_187:}

东篱闲人 发表于 2022-5-7 17:48

大猫咪 发表于 2022-5-7 13:21
哈哈老头这个变色的也特别漂亮   2只蝴蝶加的真棒！赞

蝴蝶是人家加加的。。。{:4_189:}

东篱闲人 发表于 2022-5-7 17:49

梦油 发表于 2022-5-7 13:36
曲好图美！

谢谢先生。。。{:4_190:}

梦油 发表于 2022-5-7 19:11

东篱闲人 发表于 2022-5-7 17:49
谢谢先生。。。

东篱朋友可别客气。

东篱闲人 发表于 2022-5-7 20:40

梦油 发表于 2022-5-7 19:11
东篱朋友可别客气。

嗯嗯嗯。。。{:5_108:}

东篱闲人 发表于 2022-5-7 20:41

加林森 发表于 2022-5-7 13:53
老兄，别惆怅了，我已经给你加精了。。。。

嗯嗯，治了内心忧伤了。。。{:4_170:}

东篱闲人 发表于 2022-5-7 20:41

红影 发表于 2022-5-7 13:55
真漂亮。这个有线性渐变，当然变色啊。东篱大哥可以调整变色的颜色，得到自己想要的效果

嗯嗯，有时间再研究研究。。。。{:5_112:}

加林森 发表于 2022-5-7 20:59

东篱闲人 发表于 2022-5-7 20:41
嗯嗯，治了内心忧伤了。。。

现在开心了哇。。。。{:4_189:}

东篱闲人 发表于 2022-5-8 09:14

加林森 发表于 2022-5-7 20:59
现在开心了哇。。。。

一阵一阵的。。。。{:4_170:}

东篱闲人 发表于 2022-5-8 09:25

红影 发表于 2022-5-7 13:55
真漂亮。这个有线性渐变，当然变色啊。东篱大哥可以调整变色的颜色，得到自己想要的效果

是调整这里吗？ color: teal; text-shadow: 2px 2px 1px #222;
俺没看出啥变化来啊。。{:5_115:}

红影 发表于 2022-5-8 11:20

东篱闲人 发表于 2022-5-7 20:41
嗯嗯，有时间再研究研究。。。。

不过，配色那东西我也总弄不好{:4_173:}

加林森 发表于 2022-5-8 11:50

东篱闲人 发表于 2022-5-8 09:14
一阵一阵的。。。。

那就好那就好。。。{:4_172:}

红影 发表于 2022-5-8 12:11

东篱闲人 发表于 2022-5-8 09:25
是调整这里吗？ color: teal; text-shadow: 2px 2px 1px #222;
俺没看出啥变化来啊。。

不是，是这个background: linear-gradient(45deg, red, green)

东篱闲人 发表于 2022-5-8 12:40

红影 发表于 2022-5-8 12:11
不是，是这个background: linear-gradient(45deg, red, green)

你太帅了，果然很好玩。。。{:5_112:}

马黑黑 发表于 2022-5-8 13:25

东篱闲人 发表于 2022-5-7 12:54
还能变色？

嗯，色不是空
页: [1] 2
查看完整版本: 套一下加加这个代码。。。