div+css实现直角三角形的几何定理毕达哥拉斯定理效果代码-html代码-BFW代码库

div+css实现直角三角形的几何定理毕达哥拉斯定理效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现直角三角形的几何定理毕达哥拉斯定理效果代码，在一个直角三角形中，三条边的关系可以用以下公式表示：c² = a² + b² 其中，c 表示直角三角形的斜边（也称为“斜边”或“对角线”），而 a 和 b 分别表示直角三角形的两条较短边（也称为“腿”或“边”）。毕达哥拉斯定理告诉我们，直角三角形的斜边的平方等于两条较短边的平方和。这个定理对于解决与三角形和几何有关的问题非常有用，例如测量距离、计算角度等。它被广泛应用于数学和工程领域。

代码标签： div css 直角三角形几何定理毕达哥拉斯

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

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

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


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

:root {
	--col1: #ff595e;
	--col2: #ffca3a;
	--col3: #1982c4;
	--col4: #6a4c93;
}

body {
	height: 100vh;
	margin: 0px;
	display: grid;
	place-items: center;
	background-color: #000;
	overflow: hidden;
	color: white;
	font-family: Roboto, Arial, Helevetica sans-serif;
}

div {
	position: absolute;
	animation: 4s 1s cubic-bezier(0.9, 0, 0.1, 1) alternate infinite;
}

#box {
	width: 90vmin;
	height: 90vmin;
	border: 5px solid #fff;
	background-color: #000;
	box-shadow: 0px 0px 100vmin #fff;
}

.triangle {
	width: 0px;
	height: 0px;
	border-style: solid;
}
.triangle:nth-child(1) {
	border-width: 0px 30vmin 60vmin 0px;
	border-color: #0000 var(--col1) #0000 #0000;
	right: 0px;
}
.triangle:nth-child(2) {
	border-width: 0px 30vmin 60vmin 0px;
	border-color: #0000 #0000 var(--col2) #0000;
	right: 0px;
	transform-origin: top left;
	animation-name: tri2-anim;
}
@keyframes tri2-anim {
	0%,
	25% {
		rotate: 0deg;
	}
	75%,
	100% {
		rotate: 90deg;
	}
}
.triangle:nth-child(3) {
	border-width: 30vmin 60vmin 0px 0px;
	border-color: #0000 var(--col3) #0000 #0000;
	bottom: 0px;
	animation-name: tri3-anim;
}
@keyframes tri3-anim {
	0%,
	25% {
		left: 0px;
	}
	60%,
	100% {
		left: 30vmin;
	}
}
.triangle:nth-child(4) {
	border-width: 30vmin 60vmin 0px 0px;
	border-color: var(--col4) #0000 #0000 #0000;
	bottom: 0px;
	transform-origin: bottom left;
	animation-name: tri4-anim;
}
@keyframes tri4-anim {
	0%,
	25% {
		left: 0px;
	}
	40% {
		rotate: 0deg;
	}
	60% {
		left: 30vmin;
	}
	75%,
	100% {
		left: 30vmin;
		rotate: -90deg;
	}
}

.text-square {
	display: grid;
	place-items: center;
}
.text-square:nth-child(5) {
	width: 60vmin;
	height: 60vmin;
	animation-name: text-phs1-anim;
}
.text-square:nth-child(6) {
	width: 30vmin;
	height: 30vmin;
	left: 60vmin;
	top: 60vmin;
	animation-name: text-phs1-anim;
}
@keyframes text-phs1-anim {
	0%,
	15% {
		opa.........完整代码请登录后点击上方下载按钮下载查看