这个设计原创是张洪Heo，感觉还是比较实用的，WordPress网站应该都可以使用，代码是从其他网站看到的，觉着不错就搬运过来了，有需要的可以自取！未作测试，使用前请自行保存数据，非插件，需要自己修改代码。

教程开始

使用小工具里的自定义html模块放到你想放的位置即可

<style> .wniui_card { position: relative; width: 100%; height: 300px; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); background-image: -webkit-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); border-radius: 15px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; user-select: none } .wniui_cont { position: absolute; top: 20px; width: 70%; height: 30px; background-color: rgba(255, 255, 255, .3); text-align: center; border-radius: 30px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.2s ease; z-index: 2; color: #777777 } .wniui_cont:hover { background-color: rgba(255, 255, 255, .8); transform: scale(1.05); color: #333 } .wniui_avatar { position: absolute; top: 150px; left: 50%; transform: translate(-50%, -50%) scale(1); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; z-index: 1 } .wniui_avatar img { border: 5px #fff solid; box-sizing: content-box; width: 100%; width: 70%; border-radius: 50%; transition: opacity 0.3s ease } .wniui_card:hover .wniui_avatar { transform: translate(-50%, calc(-50% + 100px)) scale(0.7) } .wniui_card:hover .wniui_avatar img { opacity: 0 } .hidden_text { position: absolute; top: 150px; left: 50%; width: 80%; font-size: 18px; transform: translate(-50%, -50%); display: flex; justify-content: center; color: #fff; opacity: 0; transition: opacity 0.3s ease; z-index: 2 } .wniui_card:hover .hidden_text { opacity: 1 } .wniui_infor { position: absolute; left: 20px; bottom: 0; width: 100%; color: #ffffff; font-size: 15px; z-index: 2 } .wniui_infor span { font-size: 18px; font-weight: 550 } .wniui_infor_qq, .wniui_infor_wx { position: absolute; z-index: 2; width: 40px; height: 40px; border-radius: 50%; bottom: 10px; background-color: rgba(255, 255, 255, .3); transition: transform 0.2s ease, background-color 0.2s ease } .wniui_infor_qq .icon, .wniui_infor_wx .icon { color: #fff; width: 100%; font-size: 25px; text-align: center; margin: 8px 0; transition: color 0.2s ease } .wniui_infor_qq:hover, .wniui_infor_wx:hover { transform: scale(1.1); background-color: rgba(255, 255, 255, 0.8) } .wniui_infor_qq:hover .icon, .wniui_infor_wx:hover .icon { color: #333 } .wniui_infor_qq { right: 20px } .wniui_infor_wx { right: 70px } /* 隐藏图片容器 */ .popup_image { display: none; position: absolute; bottom: 60px; /* 调整弹出图片的位置 */ right: 70px; z-index: 3; width: 200px; height: 200px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } /* 悬停时显示图片 */ .wniui_infor_wx:hover+.popup_image { display: block; } </style> <div class="wniui_card"> <div class="wniui_cont"><span>生活明朗 万物可爱</span></div> <div class="wniui_avatar"><img src="https://blog.zbiwl.com/wp-content/uploads/2024/07/b_921aee8151dbb5ab48650955adb8e412.jpg" alt="avatar"></div> <div class="hidden_text"> <span>这有关于<b>产品</b>、<b>设计</b>、<b>开发</b>相关的问题和看法，还有<b>文章翻译</b>和<b>分享</b>。<br>相信你可以在这里找到对你有用的<b>知识</b>和<b>教程</b>。</span> </div> <div class="wniui_infor"><span>swiper</span> <p>记录生活 留住感动</p> </div> <div class="wniui_infor_qq"><a href="https://qm.qq.com/q/Eeq74pEsHm"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-d-qq"></use> </svg></a></div> <div class="wniui_infor_wx"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-d-wechat"></use> </svg></div> <!-- 新增图片容器 --> <div class="popup_image"> <img src="https://blog.zbiwl.com/image/lxfs/wx.jpg" alt="WeChat QR Code" style="width: 100%; height: 100%; border-radius: 10px;"> </div> </div> <script> document.addEventListener('DOMContentLoaded', function () { const contElement = document.querySelector('.wniui_cont'); const messages = ['<img draggable="false" role="img" class="emoji" alt="🔍" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f50d.svg"> 分享与热心帮助', '<img draggable="false" role="img" class="emoji" alt="💢" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f4a2.svg"> 壮汉人狠话不多', '<img draggable="false" role="img" class="emoji" alt="🤝" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f91d.svg"> 专修交互与设计', '<img draggable="false" role="img" class="emoji" alt="🏃" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f3c3.svg"> 脚踏实地行动派', '<img draggable="false" role="img" class="emoji" alt="🏠" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f3e0.svg"> 智能家居小能手', '<img draggable="false" role="img" class="emoji" alt="🔨" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f528.svg"> 设计开发一条龙', '<img draggable="false" role="img" class="emoji" alt="🧱" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f9f1.svg"> 团队小组发动机', '<img draggable="false" role="img" class="emoji" alt="🤖" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f916.svg">️ 数码科技爱好者']; let currentIndex = 0; contElement.addEventListener('click', function () { currentIndex = (currentIndex + 1) % messages.length; contElement.querySelector('span').textContent = messages[currentIndex]; }); }); </script>