js实现一个做方正的人不做圆滑的人动画代码-html代码-BFW代码库

js实现一个做方正的人不做圆滑的人动画代码

代码语言：html

所属分类：动画

代码描述：js实现一个做方正的人不做圆滑的人动画代码

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

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

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=VT323&display=swap" rel="stylesheet">
  
  
  
<style>
:root {
	--box-width: 12px;
}

* {
	box-sizing: border-box;
}

body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background: rebeccapurple;
}

#squircle-container {
	border: 3px solid black;
	position: relative;
	&.reinforce {
		--box-width: 24px;
	}
}

#squircle-container::after {
	content: '';
	position: absolute;
	inset: -15px;
	border: var(--box-width) solid lightgray;
	border-right: 3px solid transparent;
}

#squircle-container::before {
	content: '';
	position: absolute;
	inset: -15px;
	border: var(--box-width) solid transparent;
	border-right: var(--box-width) solid lightgray;
	transform-origin: right top;
	rotate: 0;
	transition: all 0.5s ease;
}

#squircle-container.open {
	border-right: 3px solid transparent;
	&::before {
		rotate: -115deg;
	}
}

.square {
	width: 300px;
	height: 300px;
	background: pink;
	position: relative;
	transition: border-radius 0.5s ease, transform 1.75s ease-out;
	&.melt {
		border-radius: 50% 50% 10% 10%;
	}
	&.lean {
		border-radius: 80% 50% 30% 10%;
	}
	&.squircle {
		animation: do-squircle-thangs 0.5s ease-in-out infinite;
		animation-direction: alternate;
	}
	.eye {
		position: absolute;
		top: 35%;
		left: 50%;
		width: 2rem;
		aspect-ratio: 1;
		background-color: #000;
		border-radius: 50%;
		&.left {
			transform: translate3d(calc(-50% + -3rem), 9px, 0);
		}
		&.right {
			transform: translateX(2rem);
		}
		&::after {
			content: '';
			position: absolute;
			.........完整代码请登录后点击上方下载按钮下载查看