寻
本帖最后由 马黑黑 于 2022-4-15 19:24 编辑 <br /><br /><style>.wrap {
margin: auto; width: 760px; height: 560px;
background: url('/data/attachment/forum/202204/15/191836xzwwhx68ckldp7pk.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
background-blend-mode: screen, multiply; position: relative;
}
.img {
position: absolute; top: 20px; left: 80px; width: 154px; height: 77px;
filter: blur(1px); opacity: .65; animation: fly 20s linear infinite alternate;
}
/* 音乐控制按钮 */
.btn {
width: 60px; height: 60px; left: 5px; top: 70px; border-radius: 50%;
filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}
/* 伪元素 按钮修饰 */
.btn::before {
content: ''; position: absolute; width: 100%; height: 100%;
background: #111 radial-gradient(circle at 35% 40%,rgba(255,255,255,.5), rgba(0,255,0,.3));
background-blend-mode: difference; border-radius:50%; opacity: .35;
}
.pic { position: absolute; bottom: 10px; right: 10px; mix-blend-mode: luminosity;}
@keyframes fly { to { transform: translate(500px); } }
</style>
<div class="wrap">
<img class="img" src="https://www.huachaowang.com/data/attachment/forum/202204/15/192314r3jtkeazjjcu6a3s.gif" alt="" />
<div class="btn"></div>
</div>
<script language="javascript">
let flag = true; // false = 不自动播放
let btn = document.querySelector('.btn');
let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/15/28e50f5eb668fd98b8d52ca1383ad828.mp3';
au.autoplay = flag;
au.loop = true;
au.display = 'none';
btn.appendChild(au);
let tt = flag ? setInterval(bgChange,200) : undefined;
console.log(tt);
bgChange();
btn.onclick = function() {
flag ? (clearInterval(tt), au.pause(), flag = false) : (tt = setInterval(bgChange,200), au.play(), flag = true);
}
function bgChange() {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
btn.style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
</script>
老黑放烟雾啊？{:4_189:} 有创意{:4_199:}{:4_199:} 这个制作好特别的，在沙漠上一个飞碟在飞行，光碟播放器开始放烟雾，真好。{:4_199:} 加林森 发表于 2022-4-15 19:31
老黑放烟雾啊？
放放更健康 加林森 发表于 2022-4-15 20:35
这个制作好特别的，在沙漠上一个飞碟在飞行，光碟播放器开始放烟雾，真好。
简单的元素，就是表现一个主题，寻
红芍药 发表于 2022-4-15 20:14
有创意
晚上好 马黑黑 发表于 2022-4-15 20:39
放放更健康
这个烟雾也是代码制作的吗？ 加林森 发表于 2022-4-15 20:49
这个烟雾也是代码制作的吗？
没看出来吗
这是图片。背景图片两张，一张沙漠，一张烟雾，滤镜用上。 马黑黑 发表于 2022-4-15 20:48
简单的元素，就是表现一个主题，寻
嗯嗯，飞碟也是定位了的吧。 加林森 发表于 2022-4-15 20:51
嗯嗯，飞碟也是定位了的吧。
定不定都行，它的飞行用 translate 马黑黑 发表于 2022-4-15 20:50
没看出来吗
这是图片。背景图片两张，一张沙漠，一张烟雾，滤镜用上。
哦，我怎么就没有想到这些呢？真笨了。 马黑黑 发表于 2022-4-15 20:53
定不定都行，它的飞行用 translate
{:4_181:} 加林森 发表于 2022-4-15 20:55
哦，我怎么就没有想到这些呢？真笨了。
不是的，你进来思路太多，思维还在你自己的帖子里 加林森 发表于 2022-4-15 20:56
不过可以定一下垂直位置 马黑黑 发表于 2022-4-15 20:56
不是的，你进来思路太多，思维还在你自己的帖子里
嗯嗯，应该是的。 马黑黑 发表于 2022-4-15 20:57
不过可以定一下垂直位置
好的好的，这样就看见它的飞行轨迹了。 加林森 发表于 2022-4-15 21:07
好的好的，这样就看见它的飞行轨迹了。
嗯嗯 加林森 发表于 2022-4-15 21:06
嗯嗯，应该是的。
大概如此吧 马黑黑 发表于 2022-4-15 21:12
嗯嗯
好的
页:
[1]
2