当前位置:首页 > 网站应用 > 正文内容

CSS头像的花式悬停效果

cjw1232年前 (2023-10-21)网站应用2350
<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 charset="utf-8"> <style> * { box-sizing: border-box; } body {...

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

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

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着一些图片素材乱七八糟的东西,用起来很不方便。今天我们就教给大家一个纯css书写的在线客服效果首先我们有如下html结构<div class=&quo...

谷歌免费网站ico图标接口

分享个免费有用的ico图标的接口,可以使用谷歌提供的友链ico接口读取网址的ico图标,就可以很轻松的实现为网站友情链接增加ico图标。ico图标接口:https://t1.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallbac...

发表评论

访客

看不清,换一张

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