夕阳黄昏 发表于 2026-8-11 12:05

一句话总结中国34个省市美景

鼠标移进画面看看听听怎么说的{:5_106:}
<meta name="referrer" content="never" />
<style>
@import url(https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Long+Cang&display=swap);
:root        {--w:1080px; --h:720px;--pn:34;}
#oBlk        {
        position:relative;width:var(--w);height:var(--h);overflow:hidden;
        border-radius:32px;box-shadow:4px 4px 10px black;
        margin: 32px auto 40px calc(50% - var(--w) / 2 - 81px);
       
        #pichold        {
                width:calc(var(--pn) * var(--w));height:var(--h);position:absolute;left:0px;top:0px;
                animation: mtol 102s steps(var(--pn)) infinite;
                &:hover        {
                        animation-play-state:paused;
                }
                img        {width:1080px;height:720px;float:left;}
               
                .stle {
                        position:absolute;top:50px;font: bold 2.5em 'ZCOOL KuaiLe';color:white;
                        text-shadow: 1px 1px brown, -1px 1px brown, -1px -1px brown, 1px -1px brown;
                }
        }
        #desc        {
                position:absolute;left:100px;bottom:20px;
                font: bold 2.5em 'Long Cang';
    color:white;
    text-shadow: 1px 1px #368171, -1px 1px #368171, -1px -1px #368171, 1px -1px #368171;
        }
       
}
@keyframes mtol        {
        to {left: calc(-1 * var(--pn) * var(--w));}
}
</style>
<div id="oBlk">
                <div id="pichold">
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia5ibcTCgBCsibBt0kbv9UnN44xibOIKpS7gKfe7goRkkHbncsYtJruE3Xg/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaIibjFxmiaAXoEPmymjKIqbsOm4k8tTyuoXzIT5icLEWAPRYLuiazsFqNIw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia6RO9x015ibEib1ML467ctIiboVy93uB9ibl0ZnmQqqOcHfmAWnkicxHRsWw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaASQSfpM9v0vdhjyO4qPSaZmDIiaiaicib7nHml27Y4hpmu38uMTWp1z8rg/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliafNpNSxk0Az2XOTk2rbMiaRk4Uer4ycN8IqOnjZrOwicRebW7Lt76Cscw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaLvb6812DA0Zu9FdgianmSlqSibucApDXUd9miaWys1CX3OLHpA1MD2TMg/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaN1zr1fmwUWzFndZrCjyu6xro4QxHMK27To4NKPyZiamLnQoOYpBHicuw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliat8aAJM0JzWP5iaJrMZ2JkFgI4yNLRkiciaiaTg9QE1ovRlWRzqg8TIq7Uw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliav8SLVkV4hMVLssp9QM7WhEqiaq91CAeLV95SdWLicDkj5H6rNLgnVnjw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliawdJzPBOQayk64MKia3n4lrwTT5VzgJQjnxE9LicGlSd2pWnwPDAWiaIXA/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia6JDHrZa0x0xvp1icGib0PFXQTkaicL2Ev32cfXCt7TicqJbNicztKzHcYlw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia9FFlL6quicsiba7mty1t62DGR7EJJJx7ia6ehiaXsgAdo9UVSskI5PbvuQ/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia9pbQ2OuOny6ibxEAtHXfrqYHQBxYHSxuRANWcCJ58924PA9NONN9rhA/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaJTk8Ovlic7dJjfCFgGYlrpoA8GQIhKPjQO1hEqcJsicbMDoLnKxf9iclQ/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaRRdUico3sDOfQGicsMG6VflNxE9k09Ce8q4ltqQ2MicqiaVkTEDy5qqzEw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliao5cpNou6xicLjBCbgLKfVzShQmVUvwg6mAtTVkN644ml2OoT7mjC2fw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliah5jiaAwibAyx54re2GeponeCmvpfX2b5vMeLSvjNOVJoztRpU63yKfFw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaQmiboxoJR9fBmsRd8ddIWQ8pHIib2tKeSX9wF7dAslNQwgbOqib6wG5mA/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaGAzLqNMBjBDtBNJp0FsKpcxL8fAWHDEIWFYAr4LMHmZvgEDXohaiaaw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaImPse8ExODXUWuH26eTOPa7mFPJiaBxSUQrQP2GB9WiatoiadSpzdibOeA/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliazyHiaorib5P6MIBShXTmuIYZ5LnvT1RwauGye6xNYJzabGqLicniccXVSA/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliapDVIlaMa3h3mpwGP0ibHbrqyID6I53Bb3GnYMFRZslMObIFzMn56Bxw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaXe5yibsTsEiaetMocsHia0vI7J55DKVEzcOuuqonLEyPiajp8jT6ldg2Dw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia9rNq1KHm4O1liaibPobXouQNVFVYjsMfmtWwzTpfvcCtGdFzJFEjWdrw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliazUXALx2c0GuYGF5ibuHkVbjDciaJghuuzTM5Dl4TjbNvvmaAnCbw3Xwg/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliajHqzYicnnHMJqcxjYsSmZZAiaxJ9GZXqZPlA2X2nVMtoj0MJy0ic3JpkQ/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/Fcgicrc6tuxd6N1Jj8x8lE5DgGsmtg7GrEKIpicibhV4SbAqWLhu8MtEspL1sZbXFno7EcS92B9GyeWwQia3cWT7kg/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliacYe0iawctXQJsBvNGFtwFKur4SdLv0ZrcIPFZj2OOvOubIxFpTn2f9w/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliaxQTluRibZXDgs48HaZZXicTz57AY406gEiaTce5ibJfKx4sicPFqUiaGh6Pg/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlianso3QQT932RiaMNjmCiczCWlacNtglVCd8UZeQ7ogffsSxK6iarpym8WA/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia1b58hkw2AuROsI0zAEGuvWwRBNVCLLfOvDeO2qty3nshJZtO027HicQ/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliasJqkmP4WBXRRt2L7qaRTYEjcwjp7aJE2boaTBqQHYSaGOu8N6jqdBw/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvliayccfkKDZTYEyK38ToRl0CR7eT5OnkQpFW1nPicjwjoqDuLbgqfMKQMA/640"/>
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia20icbBy9qownJSu8suPDzfyJicXk5bQATu7ibnCfRvSb0GLDL7fWrGYsA/640"/>

                <!--img src="https://mmbiz.qpic.cn/mmbiz_jpg/L02icsLGvDxncdB2zUrBB48k4OXZPyvlia5ibcTCgBCsibBt0kbv9UnN44xibOIKpS7gKfe7goRkkHbncsYtJruE3Xg/640"/ -->
        </div>
        <p id='desc'></p>
</div>
<script>
const descTxt        = [
`去了北京才知道，故宫一年四季人不少。`,
`去了天津才知道，狗不理包子这么地道。`,
`去了河北才知道，白洋淀美得十分低调。`,
`去了山西才知道，陈年老醋绝对不是仿冒。`,
`去了内蒙古才知道，可以在大草原尽情奔跑。`,
`去了辽宁才知道，二人转是正宗的东北小调。`,
`去了吉林才知道，长白山天池白云环绕。`,
`去了黑龙江才知道，要吃着冰棍看冰雕。`,
`去了上海才知道，生活忙碌不能睡懒觉。`,
`去了江苏才知道，园林绝对是杰出代表。`,
`去了浙江才知道，西湖美景很招摇。`,
`去了山东才知道，青岛啤酒可以当饮料。`,
`去了安徽才知道，黄山云海真绝妙。`,
`去了福建才知道，可以去“四菜一汤”跑一跑。`,
`去了江西才知道，红色圣地真不少。`,
`去了河南才知道，少林武僧功夫好。`,
`去了湖北才知道，飞架南北的长江大桥。`,
`去了湖南才知道，凤凰古城烟雨飘摇。`,
`去了广东才知道，讲粤语真的挺时髦。`,
`去了海南才知道，三亚度蜜月最有情调。`,
`去了广西才知道，桂林山水美到爆。`,
`去了重庆才知道，山城的火锅很有料。`,
`去了四川才知道，九寨沟的色彩真奇妙。`,
`去了贵州才知道，茅台酒的故乡很低调。`,
`去了云南才知道，苍山洱海浪漫情调。`,
`去了西藏才知道，在布达拉宫要虔诚的祈祷。`,
`去了陕西才知道，秦始皇死后也很屌。`,
`去了甘肃才知道，莫高窟的壁画上有微笑。`,
`去了青海才知道，有片湖美得让人没烦恼。`,
`去了宁夏才知道，不大的版图上有多种地貌。`,
`去了新疆才知道，瓜果可以甜到爆。`,
`去了澳门才知道，赌博不是开玩笑。`,
`去了香港才知道，真的可以走星光大道。`,
`去了台湾才知道，这里不愧是中国的宝岛。`,
];
const imgObjs = pichold.querySelectorAll('img');
const synthObj = window.speechSynthesis;
const pn = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--pn'));
const vW = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));

imgObjs.forEach((imgObj, idx) => {
        let dm = descTxt.substr(2, descTxt.substr(2).indexOf('才'));
        let spanObj = document.createElement('span');
        spanObj.innerHTML = dm;
        spanObj.style.left = (vW * idx + 50) + 'px';
        spanObj.className = 'stle';
        pichold.appendChild(spanObj);
       
        imgObj.onmouseenter = () => {
                desc.innerHTML = descTxt;
                  synthObj.cancel();
                  let voiceObj = new SpeechSynthesisUtterance(descTxt);
                   voiceObj.lang = "zh-CN";
                  voiceObj.rate = 0.9; //语速，数字越小读得越慢
                   synthObj.speak(voiceObj);
        }
        imgObj.onmouseout = () => {
                desc.innerHTML = '';
                synthObj.cancel();
        }
})
</script>

魏淑芬 发表于 2026-8-11 14:28

这个发帖方式好有趣，又一个新鲜东东，收藏了，谢谢老师分享！{:4_204:}

夕阳黄昏 发表于 2026-8-11 14:34

魏淑芬 发表于 2026-8-11 14:28
这个发帖方式好有趣，又一个新鲜东东，收藏了，谢谢老师分享！

谢谢欣赏支持！ 下午好！

梦油 发表于 2026-8-11 15:35

各省（市、区）特点一览无余，好创意！
问好夕阳黄昏朋友。

梦江南 发表于 2026-8-11 16:18

这下34个省市美景有了看了。{:4_187:}

夕阳黄昏 发表于 2026-8-11 16:38

梦油 发表于 2026-8-11 15:35
各省（市、区）特点一览无余，好创意！
问好夕阳黄昏朋友。

谢谢欣赏支持！ 下午好！

夕阳黄昏 发表于 2026-8-11 16:38

梦江南 发表于 2026-8-11 16:18
这下34个省市美景有了看了。

谢谢欣赏支持！ 下午好!

梦油 发表于 2026-8-11 20:03

夕阳黄昏 发表于 2026-8-11 16:38
谢谢欣赏支持！ 下午好！

夕阳黄昏朋友别客气。

夕阳黄昏 发表于 2026-8-11 22:00

梦油 发表于 2026-8-11 20:03
夕阳黄昏朋友别客气。

客气了。 晚上好！

杨帆 发表于 2026-8-11 23:22

精辟，独特，好制作，谢谢夕阳老师精彩分享{:4_190:}

夕阳黄昏 发表于 2026-8-12 07:25

杨帆 发表于 2026-8-11 23:22
精辟，独特，好制作，谢谢夕阳老师精彩分享

谢谢欣赏支持！早上好！

霜染枫丹 发表于 2026-8-12 07:45

i夕阳黄昏早上好~~

赶紧收藏这好帖！形式新颖，制作精美，功能实在而不是噱头。感谢分享，祝您安好！{:4_204:}{:4_190:}

夕阳黄昏 发表于 2026-8-12 08:36

霜染枫丹 发表于 2026-8-12 07:45
i夕阳黄昏早上好~~

赶紧收藏这好帖！形式新颖，制作精美，功能实在而不是噱头。感谢分享，祝您安好！{:4 ...

谢谢欣赏支持！ 上午好！

红影 发表于 2026-8-12 09:15

这么多的美景，而且这介绍还是押韵的。
感谢夕阳黄昏带来的好帖，让人大开眼界啊{:4_199:}

夕阳黄昏 发表于 2026-8-12 09:31

红影 发表于 2026-8-12 09:15
这么多的美景，而且这介绍还是押韵的。
感谢夕阳黄昏带来的好帖，让人大开眼界啊

谢谢欣赏支持！上午好！

红影 发表于 2026-8-12 22:24

夕阳黄昏 发表于 2026-8-12 09:31
谢谢欣赏支持！上午好！

这个帖子特别好，再次感谢夕阳黄昏老师带来的好帖{:4_187:}

夕阳黄昏 发表于 2026-8-13 07:48

红影 发表于 2026-8-12 22:24
这个帖子特别好，再次感谢夕阳黄昏老师带来的好帖

https://pic.616pic.com/ys_bnew_img/00/33/15/Tuer17ygmi.jpg

雨季工作室 发表于 2026-8-15 05:35

欣赏黄昏朋友佳作。

夕阳黄昏 发表于 2026-8-15 08:08

雨季工作室 发表于 2026-8-15 05:35
欣赏黄昏朋友佳作。

谢谢欣赏支持！ 早上好！
页: [1]
查看完整版本: 一句话总结中国34个省市美景