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:50px;
	margin:2em;
	z-index:4;
	position:relative;
}

#download,#start{
width:50px;
	height:50px;
	margin:2em;
}
.btn{
	width: 240px;
  height: 240px;
  display: flex;
	flex-flow:column;
  align-items: center;
  justify-content: center;
	 
	border-radius:35%;
	margin-right:4em;
}
.squareShadow {
z-index:0;
	clip-path:url("#svgClip") ;
width: 150px;
  height: 150px;
	position:absolute;
	top:50;
	left:50;
	transform:translate(50% 50%);

	background-color:#D7DDE9;/* Inside shadow effect */
}
.squareShadowCopy {
z-index:0;
	clip-path:url("#svgClip") ;
width: 100px;
  height: 100px;
	position:absolute;
	top:50;
	left:50;
	transform:transl.........完整代码请登录后点击上方下载按钮下载查看