重新修改我的标志
<!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>