奇妙的头像——纯CSS代码

_Jolee_

已于 2024-02-03 21:07:49 修改

阅读量381

点赞数 10

文章标签： css

于 2024-02-03 20:46:14 首次发布

本文链接：https://blog.csdn.net/jokerjiaojiao/article/details/135933425

版权

文章介绍了如何使用CSS代码为图片添加动态GIF效果，并推荐了一个在线的免费抠图网站Remove.bg，帮助用户处理图片背景。

摘要由CSDN通过智能技术生成

GIF效果演示：图片资源：

另外，推荐一个超棒的免费抠背景网站：https://www.remove.bg/zh/

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			background-color: papayawhip;
		}

		img {
			--s: 280px;
			--b: 5px;
			--f: 1;
			--c1: mediumvioletred;
			--c2: darksalmon;
			--bgOptions: content-box no-repeat center/ calc(100% / var(--f)) 100%;
			--shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));

			margin: 100px;

			width: var(--s);
			height: var(--s);
			outline: var(--b) solid var(--c1);
			transform: scale(var(--f));
			transition: 0.5s;
			background: radial-gradient(circle closest-side,
					var(--c2) calc(100% - var(--b)),
					var(--c1) calc(100% - var(--b)),
					var(--c1) 100%, transparent 100%) var(--bgOptions);
			border-radius: 0 0 999px 999px;
			outline-offset: var(--shrink);

			padding-top: 100px;

			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 100%, transparent) var(--bgOptions);
			/* background: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f)) 50%; */
		}

		img:hover {
			--f: 1.35;
		}
	</style>
</head>

<body>
	<img src="./imgs/boy.png">
</body>

</html>

_Jolee_

关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
奇妙的头像——纯CSS代码

【代码】【CSS】奇妙的头像代码。
复制链接

扫一扫

奇妙的头像——纯CSS代码

“相关推荐”对你有帮助么？