当前位置:首页 > 网站应用

CSS头像的花式悬停效果

cjw1232年前 (2023-10-21)网站应用4400
<html><head><style>img {
	--s:280px;
	/* image size */   
	--b:5px;
	/* border thickness */   
	--c:#C02942;
	/* border color */   
	--f:1;
	/* initial scale */      
	width:var(--s);
	aspect-ratio:1;
	padding-top:calc(var(--s)/5);
	cursor:pointer;
	border-radius:0 0 999px 999px;
	--_g:50%/calc(100%/var(--f)) 100% no-repeat content-box;
	--_o:calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
	outline:var(--b) solid var(--c);
	outline-offset:var(--_o);
	background:radial-gradient(circle closest-side,#ECD078 calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000 ) var(--_g);
	-webkit-mask:linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
	transform:scale(var(--f));
	transition:.5s;}img:hover {
	--f:1.35;
	/* hover scale */}body {
	margin:0;
	min-height:100vh;
	display:grid;
	place-content:center;
	background:#E0E4CC;}</style></head><body><img src="https://www.west.cn/Customercenter/UploadImages/milogo/2305/t3mwenc420719s4u6.png" alt=""></body></html>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=20

分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot…

太极八卦图特效代码

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8"> &nbs…

纯css实现文字音符跳动效果

通过纯css实现文字音符跳动效果。点下面的运行可以查看效果!<!doctype html><html>     <head>        …

状态码页面单页源码

可做为各种错误页!具体点下面的运行看演示<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <m…

2026免费GoogleSSL无需翻墙

2026年博主亲测,免费好用的90天Google域名SSL证书注册平台,高效且无需VPN翻墙,支持邮件提醒续期。https://buruo.cn/这个站使用的就是GoogleSSL证书。注册登录:使用个人邮箱注册账号,进入控制台,无需实名认证,点击“免费SSL证书”。 证书申请:选择“Go…

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。