css的clippath实现4种带边框鼠标悬停消失动画效果代码-html代码-BFW代码库

css的clippath实现4种带边框鼠标悬停消失动画效果代码

代码语言：html

所属分类：悬停

代码描述：css的clippath实现4种带边框鼠标悬停消失动画效果代码

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

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

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

  
<style>
*,
* + * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	margin: 2rem 0;
	display: grid;
	place-items: center;
	background-image: linear-gradient(-45deg, #1b1811, #222);
}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4rem;
}

.outer {
	display: flex;
	flex-shrink: 0;
	height: calc(200px + 4vw);
	width: calc(200px + 4vw);
	background-image: linear-gradient(
		to bottom right,
		#0b3d91 40%,
		#fff,
		#fc3d21 50%
	);
}

.inner {
	height: calc(190px + 4vw);
	width: calc(190px + 4vw);
	background: url(//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png)
		no-repeat center;
	background-size: cover;
	margin: auto;
}

.inset {
	clip-path: inset(0% 0% 0% 0% round 5%);
}

.circle {
	clip-path: circle(50%.........完整代码请登录后点击上方下载按钮下载查看