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

CSS头像的花式悬停效果

cjw1232年前 (2023-10-21)网站应用3890
<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…

html中表table行循环滚动,类似车次、航班动态

<HTML> <meta charset="utf-8"> <HEAD> <TITLE>滚动表格</TITLE> <!--css样式是锁定表头不动的--> <style>&nb…

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

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

嘈杂的声音

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

html中文本不停变色的特效

<HTML><HEAD><TITLE>文本特效篇--文本不停变色</TITLE> </HEAD> <BODY bgcolor="#fef4d2"> <br> <center…

瞌睡小鸟按钮特效

<!DOCTYPE html> <html lang="en">   <head>     <title>瞌睡小鸟按钮特效</title&g…

发表评论

访客

看不清,换一张

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