<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的标志</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #cbcbcb;display: flex;justify-content: center;align-items: center;min-height: 100vh;flex-direction: column;}.logoBox {position: relative;width: 145px;height: 38px;/* margin-left: 5px; */border-radius: 12px 18px 1px 1px;background: rgba(203, 203, 203, 0.5);backdrop-filter: blur(5px);box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);a {img {position: absolute;z-index: 1;}img.ying {height: 46px;transform: translate(-32%, -17%);}img.kong {height: 38px;transform: translate(310%, 0%);}figcaption {position: absolute;font-size: 2em;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);background: linear-gradient(to bottom, #0077ff 50%, #ff2600 50%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);letter-spacing: -0.1em;padding-left: 26px;transform: translate(0%, 4%);border-radius: 50%;height: 100%;width: 100%;line-height: 35px;font-weight: 900;}.figcaption1 {clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);margin-top: -2px;}.figcaption2 {clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);}}b.pinyin {position: absolute;transform: translate(53%, 110%);line-height: 10px;span {color: #feee02d7;font-size: 0.8em;text-shadow: 1px 1px 1px rgb(0, 0, 0);}&:hover {font-size: 1.8em;font-weight: 900;background-color: #2c3e507e;transform: translate(5%, 0%);line-height: 35px;border-radius: 50%;z-index: 2;}}}</style>
</head><body><figure class="logoBox"><a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page" title="首页"target="_blank"><img class="ying" src="file:///D:/img/荧.png" alt="妖为邻" /><figcaption class="figcaption1">妖为邻</figcaption></a><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="妖为邻CSDN博客" target="_blank"><img class="kong" src="file:///D:/img/空.png" alt="妖为邻"><figcaption class="figcaption2">妖为邻</figcaption></a><b class="pinyin"><span>yāo</span> <span>wéi</span> <span>lín</span></b></figure><p>妖为邻，善为友，恶为怨，欲速则不达。</p>
</body></html><!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的标志</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #cbcbcb;display: flex;justify-content: center;align-items: center;min-height: 100vh;flex-direction: column;}.logoBox {position: relative;width: 145px;height: 38px;border-radius: 12px 18px 1px 1px;background: rgba(203, 203, 203, 0.5);backdrop-filter: blur(5px);box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);a {img {position: absolute;z-index: 3;}img.ying {height: 46px;transform: translate(-32%, -17%);}img.kong {height: 38px;transform: translate(310%, 0%);}figcaption {position: absolute;font-size: 2em;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);background: linear-gradient(to bottom, #0077ff 50%, #ff2600 50%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);letter-spacing: -0.1em;padding-left: 26px;transform: translate(0%, 4%);border-radius: 50%;height: 100%;width: 100%;line-height: 35px;font-weight: 900;z-index: 2;}.figcaption1 {clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);margin-top: -2px;}.figcaption2 {clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);}}b.pinyin {position: absolute;transform: translate(53%, 110%);line-height: 10px;z-index: 20;span {-webkit-text-stroke: #ffffff 1px;color: #feee02d7;font-size: 0.8em;text-shadow: 1px 1px 1px rgb(0, 0, 0);}&:hover {width: 100%;padding-left: 10px;transform: translate(0%, 0%);font-size: 1.8em;font-weight: 900;background-color: #2c3e507e;line-height: 35px;border-radius: 50%;}}}.planet {width: 100%;height: 100%;border-radius: 50%;background-image: linear-gradient(150deg, #d3d3d3, #949494, transparent);animation: move 1s infinite;}.planet::before,.planet::after {content: "";position: absolute;top: -1px;left: -2px;width: 145px;height: 37px;border-radius: 50%;border: 2px solid #ff0303;border-top-color: transparent;transform: rotate(0deg);}.planet::after {border-top-color: #ef9999;}@keyframes move {0% {background: radial-gradient(at 60% 0%, rgba(255, 255, 204, 1), rgba(255, 204, 153, 1));}25% {background: rgb(255, 255, 204);}50% {background: radial-gradient(at 60% 0%, rgba(204, 255, 255, 1), rgba(153, 204, 255, 1));}75% {background: linear-gradient(0.25turn, rgba(255, 255, 204, 0.7), rgba(255, 204, 204, 0.7), rgba(255, 240, 240, 1));}100% {background-color: rgba(204, 255, 204, 0.9);}}</style>
</head><body><figure class="logoBox"><a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page" title="首页"target="_blank"><img class="ying" src="file:///D:/img/荧.png" alt="妖为邻" /><figcaption class="figcaption1">妖为邻</figcaption></a><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="妖为邻CSDN博客" target="_blank"><img class="kong" src="file:///D:/img/空.png" alt="妖为邻"><figcaption class="figcaption2">妖为邻</figcaption></a><b class="pinyin"><span>yāo</span> <span>wéi</span> <span>lín</span></b><div class="planet"></div></figure><p>妖为邻，善为友，恶为怨，欲速则不达。</p>
</body></html>