我的标志：奇特的头像

与妖为邻

于 2024-09-16 21:00:00 发布

阅读量129

点赞数 4

文章标签：前端 javascript css 我的标志 logo

本文链接：https://blog.csdn.net/lulei5153/article/details/142292313

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>与妖为邻</title>
	<style>
		figure.logo {
			width: 262px;
			height: 50px;
			transform: scale(3) translate(110px, 50px);
			border-radius: 50%;
			background: #f30303;
			box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
				inset -4px -4px 5px rgba(0, 0, 0, 0.6);
			z-index: 99;
			figcaption {
				background: hsl(0, 0%, 0%);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: bold;
				box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
				letter-spacing: -3px;
				line-height: 45px;
				border-radius: 50%;
				font-size: 40px;
				width: 152px;
			}
			.my_name1 {
				text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
				clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
				transform: translate(35%, 0%);
				-webkit-text-stroke: #fffbfb 1px;
			}
			.my_name2 {
				text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
				clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
				transform: translate(35%, -93%);
				-webkit-text-stroke: #ffffff 1px;
			}
			.avatarYing,
			.avatarKong {
				position: absolute;
				width: 60px;
				height: 35px;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(243, 3, 3, 0.8));
				border-radius: 50%;
				margin-left: 204px;
			}
			img {
				--s: 60px;
				--b: -5px;
				--f: 1;
				--bgOptions: content-box no-repeat center/ calc(100% / var(--f)) 100%;
				--shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));
				padding-top: 15px;
				width: var(--s);
				height: var(--s);
				transform: scale(var(--f));
				transition: 0.5s;
				mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f) - 2 * var(--b)) 50%,
					radial-gradient(circle closest-side, #fff 60%, transparent) var(--bgOptions);
			}
			.avatarYing {
				margin-left: 0px;
				margin-top: -83px;
			}
			.avatarKong {
				margin-left: 202px;
				margin-top: 8px;
			}
			.kong {
				margin-top: -40px;
				&:hover {
					--f: 1.5;
				}
			}
			.ying {
				margin-top: -44px;
				--f: 1.4;
				&:hover {
					--f: 1.8;
				}
			}
		}
	</style>
</head>
<body>
	<figure class="logo">
		<div class="avatarKong">
			<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="与妖为邻">
			</a>
		</div>
		<figcaption class="my_name1">与妖为邻</figcaption>
		<figcaption class="my_name2">与妖为邻</figcaption>
		<div class="avatarYing">
			<a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" title="首页" target="_blank">
				<img class="ying" src="file:///D:/img/荧抠图.png" alt="与妖为邻">
			</a>
		</div>
	</figure>
</body>
</html>