css+svg实现鼠标悬停图标按钮动画效果代码-html代码-BFW代码库

css+svg实现鼠标悬停图标按钮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css+svg实现鼠标悬停图标按钮动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
background:#EFF2F7;
}
.row{
	display: flex;
  flex-flow: row;
  width: 100%;
  height:100%;
	align-items:center;
	justify-content:center;

}

#inset{
	display: flex;
  flex-flow: row;
  width: 70%;
  height: 80%;
	align-items:center;
	justify-content:center;
border-radius: 46px;

	position:relative;


}
.container{
	position:relative;
	 min-width: 100vw;
  height: 250px;
	filter: drop-shadow(5px 5px 10px #000000);
}
.square {
	width: 100px;
	height: 100px;
	background:#F1F1F1;
	 clip-path:url("#svgClip") ;
	position:relative;
	z-index:4;
display:flex;
	justify-content:center;
	align-items:center;
	padding:0.5em;
background: #f2f2f2;
background: linear-gradient(90deg, rgba(242, 242, 242, 1) 0%, rgba(207, 207, 207, 1) 100%);

}

#triangle{
width:50px;
	height:.........完整代码请登录后点击上方下载按钮下载查看