div+css实现鼠标悬浮圆形卡片光效动画效果代码-html代码-BFW代码库

div+css实现鼠标悬浮圆形卡片光效动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现鼠标悬浮圆形卡片光效动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@300&display=swap" rel="stylesheet">
  
  
  
<style>
.item{
	box-shadow: 
		inset var(--itemWidthMinus) var(--itemWidthMinus) 0 black, 
		inset var(--itemWidth) var(--itemWidthMinus) 0 green, 
		inset var(--itemWidthMinus) var(--itemWidth) 0 blue, 
		inset var(--itemWidth) var(--itemWidth) 0 yellow, 
		0 0 20px silver;
	transition: box-shadow ease-in-out .6s, color ease-in-out .5s;	
	width: var(--itemWidth);
	height: var(--itemWidth);
	border-radius: 50%;
	text-align: center;
	background: center/50%  no-repeat;
	cursor: pointer;
	display: grid;
	color: white;
	font-size: calc(var(--itemWidth) / 7);
	grid-row:  2 / 3;
}
.item:hover{
	box-shadow: 
		inset 0 0 0 transparent, 
		inset 0 0 0 transparent, 
		inset 0 0 0 transparent, 
		inset 0 0 0 transparent, 
		0 0 20px silver;
	color: transparent;
}
section{
	--itemWidth: min(300px, 30vw);
	--itemWidthMinus: calc(-1 * var(--itemWidth));
	height: max-content;
	width: max-content;
	display: grid;
	grid-temp.........完整代码请登录后点击上方下载按钮下载查看