鹊桥汇——祝福大家七夕节快乐
<style>
#papa { left: -302px; top:120px; width: 1200px; height: 675px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62eb37b616f2c2beb1201e2f.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative;overflow: hidden; }
#papa div, #papa img, #papa span { position: absolute; }
#mama { width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); background: radial-gradient(at 40% 30%, snow, transparent); border-radius: 0%; display: grid; place-items: center; transform: rotate(45deg);box-shadow: -30px 30px 50px #444;}
#disc { right: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; opacity: 0; cursor: pointer; animation: rot 2s linear infinite; }
#zhinv {width: 138px; height: 302px; left: 978px; bottom: 200px; opacity: 0; }
#niulang { width: 109px; height: 336px;left: 84px; bottom: 200px; opacity: 0; }
#xique { width: 450px; height: 234px; right: calc(50% - 210px); top: calc(50% - 90px);opacity: 0; }
#tit { font: bold 2em/2.4em sans-serif; color: #F6DE80; text-shadow: 1px 1px 2px rgba(0,0,0,.75); opacity: 0;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="disc"></div>
<img id="xique" src="https://pic.imgdb.cn/item/62eb37d816f2c2beb1204db9.gif" alt="" />
<img id="zhinv" src="https://pic.imgdb.cn/item/62cfd696f54cd3f937985b51.png" alt="" />
<img id="niulang" src="https://pic.imgdb.cn/item/62cfd6b7f54cd3f93798908f.png" alt="" />
<div id="mama"><span id="tit">鹊桥汇</span></div>
</div><br><br><br><br><br><br>
<script>
let idx = 0, aud = new Audio();
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/04/94816e0271f03af2bf41621bbaafaa5b.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
let TT = setTimeout(change,3000);
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
function change() {
let aniAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let ele = aniAr;
ele.style.transition = 'all 3s';
ele.style.cssText += aniAr;
idx ++;
idx <= aniAr.length - 1 ? TT = setTimeout(change, 3000) : clearTimeout(TT);
}
</script> 美丽的七夕节，祝福天下有情人终成眷属{:4_204:} 给力，可惜加分太快了，后面看不见了，晚上电脑看 好美的意境！尤其那两小人儿好美！{:4_187:} 祝天下有情人终成眷属！ 刷新继续欣赏，亲爱的，美极了{:4_178:} 借亲爱的美帖祝福论坛的朋友们七夕快乐 本帖最后由 梦油 于 2022-8-4 18:06 编辑
星光灿烂银河水，隔情断意不可为。
喜鹊搭桥成人美，牛郎织女鹊桥会。
但愿人间无银河，有情之人无怨悔。
琴瑟和谐到白头，生生死死不离开。
祝朋友们七夕快乐、幸福安康！ 樵歌 发表于 2022-8-4 17:06
好美的意境！尤其那两小人儿好美！
应个景，正好学习巩固一下黑黑的代码{:4_173:} 小辣椒 发表于 2022-8-4 17:39
借亲爱的美帖祝福论坛的朋友们七夕快乐
跟亲爱的一起祝福{:4_187:} 梦油 发表于 2022-8-4 18:04
星光灿烂银河水，隔情断意不可为。
喜鹊搭桥成人美，牛郎织女鹊桥会。
但愿人间无银河，有情之人无怨悔。 ...
梦油真是有才，随手就是精美诗句。跟梦油一起祝福大家节日快乐{:4_204:} 呀啊呀呀，太美了，你们的技术越来越精美了 设计精妙。赞。 醉美水芙蓉 发表于 2022-8-4 20:16
红影美女做得好漂亮喔！
多谢水芙蓉鼓励，应个景，顺祝芙蓉节日快乐{:4_187:} 上海朝阳 发表于 2022-8-4 20:39
呀啊呀呀，太美了，你们的技术越来越精美了
谢谢朝阳大哥鼓励{:4_187:} 马黑黑 发表于 2022-8-4 21:02
设计精妙。赞。
我找不到喜鹊的动图，就放了点鸟儿假装是喜鹊{:4_189:} 葡萄树下银河上，
鹊桥两岸痴情人。
如梦如幻的星空！
愿天下有情人终成眷属
愿时空阻隔不了所有的相思
四海八荒 发表于 2022-8-4 22:41
葡萄树下银河上，
鹊桥两岸痴情人。
如梦如幻的星空！
跟四海一起祝福全天下的有情人，也祝四海节日快乐{:4_187:} 红影 发表于 2022-8-4 22:26
我找不到喜鹊的动图，就放了点鸟儿假装是喜鹊
假装得像就好
页:
[1]
2