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;
			left: 0%;
			top: 3rem;
			transform: rotate(12deg);
			width: 0.75rem;
			height: 1.5rem;
			background-color: #fff;
			border-radius: 40%;
			box-shadow: 1.25rem -0.5rem 0 #fff;
			opacity: 0.4;
			scale: 0.8;
		}
	}
	.mouth {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		width: 3rem;
		height: 2rem;
		border-bottom: 8px solid #000;
		border-radius: 50%;
		transition: all 0.5s ease;
	}
}

@keyframes do-squircle-thangs {
	from {
		border-radius: 80% 50% 30% 10%;
	}
	to {
		border-radius: 60% 80% 10% 30%;
	}
}


#fist {
	position: absolute;
	left: 400%;
	top: 50%;
	transform: translate3d(0, -50%, 0);
	transition: left 0.1s ease;
/* 	display: none; */
	&.punch {
		left: 100%;
	}
}

#text-box {
	position: absolute;
	right: 70%;
	bottom: 40%;
	width: 225px;
	height: 150px;
	background-color: #fff;
	z-index: 3;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	font-family: "Comic Neue";
	transition: all 0.5s ease;
	opacity: 0;
	pointer-events: none;
	&::before {
		content: '';
		position: absolute;
		left: 45%;
		top: 95%;
		width: 100px;
		height: 75px;
		border-left: 36px solid #fff;
		transform: translateY(-50%);
		border-radius: 50%;
		z-index: 2;
	}
}
</style>

  
</head>

<body translate=&quo.........完整代码请登录后点击上方下载按钮下载查看