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

CSS头像的花式悬停效果

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

分享一些可用的网站生成图片接口地址(网站截图api接口)

做导航网站时,处于设计需要及提高用户体验,可能需要给网站截图以调用显示,这就需要把网站生成图片,手动操作可以使用截图工具,或是使用谷歌浏览器开发者工具命令screenshot来生成网站截图,也可使用一些在线网站生成图片的工具,这些都可以把网站生成图片,那么如何自动为网站生成图片?网址截图api接口又…

摇摆的灯光

点击运行看演示效果!<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">…

css3+html5特效制作闪烁的文字

<head><charset="utf-8" /> <style> @-webkit-keyframes flash {     0%{   &n…

兼容的HTML5的网页圆角提示框

<!doctype html><html><head><meta charset="utf-8"> <title>纯css的圆角提示框全兼容_www.youkud.com</title>…

发表评论

访客

看不清,换一张

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