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

CSS头像的花式悬停效果

cjw1233年前 (2023-10-21)网站应用5430
<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://www.cjw123.com/blog/?id=20

分享给朋友:

相关文章

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

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

js文字定时向上滚动特效代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

表格内信息向上滚动代码,类似航班

<html> <head> <title>滚动信息</title> <meta http-equiv="Content-Type" content="text/html; char…

zblogphp二级目录建站,伪静态规则怎么写

如果你的 Z-BlogPHP 站点安装在二级目录中,需要使用伪静态技术来优化站点的 URL,并提升搜索引擎蜘蛛的抓取效率。下面是一个 nginx 的伪静态规则示例:# 子目录规则要排在前边; location /sub/ {    &n…

开灯!关灯!

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

彩色流转文字代码

根据自己需求修改代码,点击运行预览效果!<style>     #nr{font-size:15px; margin: 0;background: -webkit-linear-gradient(left,#ffff…

发表评论

访客

看不清,换一张

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