css实现按钮点击变成帆船效果代码-html代码-BFW代码库

css实现按钮点击变成帆船效果代码

代码语言：html

代码描述：css实现按钮点击变成帆船效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body,
html {
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: grid;
	background: rgb(238, 174, 202);
	background: linear-gradient(
		30deg,
		rgba(238, 174, 202, 1) 0%,
		rgba(148, 187, 233, 1) 100%
	);
}

#container {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	display: flex;
	transform: translatex(0px);
	transition: all 2.5s;
}

button {
	justify-self: center;
	align-self: flex-end;
}

button:focus {
	outline: none;
}

#buttoun {
	width: 300px;
	height: 100px;
	border-radius: 10px 10px 10px 10px;
	border: none;
	background-color: rgb(100, 100, 200);
	z-index: 1;
	transition: all 1s;
}

#mast {
	width: 12px;
	height: 160px;
	transform-origin: bottom;
	transform: translate(170px, 48px) rotatez(-90deg);
	background-color: rgb(100, 100, 200);
	transition: all 1s;
}

#sail-1 {
	width: 0;
	height: 0;
	border-bottom: 145px solid white;
	border-right: 60px solid transparent;
	transform-origin: bottom;
	transform: translatex(16px) scaley(0.001);
	transition: all 1s;
}

#sail-2 {
	width: 0;
	height: 0;
	border-bottom: 145px solid white;
	border-left: 100px solid transparent;
	transform-origin: bottom;
	transform: translate(-104px, -145px) scaley(0.001);
	transition: all 1s;
}
</style>



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