css布局实现一个蝴蝶与花朵的动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css布局实现一个蝴蝶与花朵的动画效果代码，将鼠标悬浮在上面试试
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>

:root {
	--black: #000;
	--yellow: #fdb105;
	--orange: #e4691c;
	--red: #000;
}

*:before,
*:after {
	position: absolute;
	content: "";
}

body {
	margin: 0;
	padding: 0;
	background: linear-gradient(180deg, #178ce8, #bfe2ff 85%, transparent 85%),
		linear-gradient(
			to top,
			#0a190b 0%,
			#255226 4%,
			#8bc34a 14%,
			#1e6f20b3 15%,
			transparent 15%
		);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	perspective: 500vmin;
}

body *,
*:before,
*:after {
	box-sizing: border-box;
	position: absolute;
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

.butterfly {
	width: 80vmin;
	height: 60vmin;
	/* 
	background-size: cover;
    background-position: -3px 48%;
	background: url(./btf.jpg) no-repeat center;
	*/
}

.butterfly > * {
	position: absolute;
}

.head {
	background: radial-gradient(ellipse at 31% 39%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(ellipse at 65% 39%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(ellipse at 15% 45%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(ellipse at 85% 45%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(ellipse at 15% 50%, #fff 0.1vmin, #fff0 0.2vmin),
		radial-gradient(ellipse at 85% 50%, #fff 0.1vmin, #fff0 0.2vmin),
		radial-gradient(ellipse at 29% 68%, #fff 0.25vmin, #fff0 0.35vmin),
		radial-gradient(ellipse at 71% 68%, #fff 0.25vmin, #fff0 0.35vmin),
		radial-gradient(ellipse at 27% 62%, #fff 0.2vmin, #fff0 0.3vmin),
		radial-gradient(ellipse at 73% 62%, #fff 0.2vmin, #fff0 0.3vmin), var(--black);
	width: 4vmin;
	height: 3vmin;
	left: calc(50% - 2vmin);
	top: calc(50% - 5vmin);
	border-radius: 2vmin;
	z-index: 2;
}

.head::before {
	border: 0.35vmin solid transparent;
	border-top: 0.5vmin solid #fff;
	left: calc(50% - 0.4vmin);
	top: 0.25vmin;
}

.mouth {
	width: 100%;
	height: 1.1vmin;
	top: -0.85vmin;
}

.mouth::before,
.mouth::after {
	border: 0.25vmin solid var(--black);
	height: 1vmin;
	border-radius: 0 100% 0 75%;
	width: 0.25vmin;
	transform: rotate(30deg);
	left: 1vmin;
	background: linear-gradient(18deg, var(--black) 55%, #fff 65%);
	box-shadow: 0 0 1px 1px var(--black) inset;
}

.mouth::after {
	transform: rotate(-30deg);
	left: 2.1vmin;
	border-radius: 100% 0 75% 0;
	background: linear-gradient(16deg, var(--black) 55%, #fff 65%);
}

.l-antenna,
.r-antenna {
	width: 0.25vmin;
	height: 14vmin;
	background: var(--black);
	top: -12.5vmin;
	transform: rotate(-32deg);
	border-radius: 0 30% 30% 30%;
	left: -2.5vmin;
}

.r-antenna {
	top: -12.5vmin;
	transform: rotate(30deg);
	border-radius: 30% 0 30% 30%;
	left: 6vmin;
}

.l-antenna:before,
.r-antenna:before {
	width: 0.85vmin;
	height: 2vmin;
	background: var(--black);
	top: -1.75vmin;
	border-radius: 0 100% 0% 100%;
	left: -0.75vmin;
	transform: rotate(-5deg);
}

.r-antenna:before {
	transform: rotate(190deg);
	left: 0.2vmin;
	border-radius: 100% 0%;
}

.l-antenna:after,
.r-antenna:after {
	width: 0.15vmin;
	height: 14vmin;
	background: var(--black);
	top: -0.5vmin;
	transform: rotate(-1deg);
	left: 0;
}

.r-antenna:after {
	transform: rotate(1deg);
	left: 0.15vmin;
}

.body {
	background: var(--black);
	width: 3vmin;
	height: 23vmin;
	left: calc(50% - 1.5vmin);
	top: calc(50% - 3vmin);
	border-radius: 1.5vmin 1.5vmin 150% 150%;
	z-index: 1;
}
.body:before {
	background: radial-gradient(ellipse at 10% 29%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(ellipse at 90% 29%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(circle at 90% 40%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(circle at 10% 40%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(circle at 90% 42%, #fff 0.1vmin, #fff0 0.2vmin),
		radial-gradient(circle at 10% 42%, #fff 0.1vmin, #fff0 0.2vmin), var(--black);
	width: 5vmin;
	height: 10vmin;
	left: calc(50% - 2.5vmin);
	top: calc(50% - 12.5vmin);
	border-radius: 70% 70% 100% 100%;
}

.body span {
	width: 3vmin;
	height: 2vmin;
	left: calc(50% - 1.5vmin);
	top: calc(50% + 10vmin);
	position: absolute;
}
.body span:before,
.body span:after {
	background: var(--black);
	width: 0.25vmin;
	height: 2vmin;
	left: calc(50% - 0.5vmin);
	top: calc(50% - 0.75vmin);
	border-radius: 40%;
	transform: rotate(-10deg);
}
.body span:after {
	left: calc(50% + 0.35vmin);
	transform: rotate(10deg);
}

.wing {
	width: 35vmin;
	height: 50vmin;
	left: 3.5vmin;
	top: 6vmin;
}
.wing > span:nth-child(1) {
	background: 
		
		/*** white ***/ radial-gradient(
			ellipse at 27% 31%,
			#ffffff 0.4vmin,
			#fff0 0.55vmin
		),
		radial-gradient(circle at 28% 31%, #ffffff 0.25vmin, #fff0 0.4vmin),
		radial-gradient(ellipse at 27% 34%, #ffffff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 38% 23%, #ffffff 0.4vmin, #fff0 0.55vmin),
		radial-gradient(ellipse at 39% 27%, #ffffff 0.8vmin, #fff0 1vmin),
		radial-gradient(ellipse at 52% 16%, #ffffff 0.25vmin, #fff0 0.4vmin),
		radial-gradient(ellipse at 51% 16%, #ffffff 0.2vmin, #fff0 0.35vmin),
		radial-gradient(ellipse at 18% 93%, #fff 0.65vmin, #fff0 0.8vmin),
		radial-gradient(ellipse at 18% 93%, #fff 0.65vmin, #fff0 0.8vmin),
		radial-gradient(circle at 10% 91%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(circle at 12% 83%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(circle at 12.9% 83.5%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 4.5% 86.5%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 6.5% 79.5%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 6.5% 77.5%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(circle at 2% 80%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 5.5% 70%, #fff 0.4vmin, #fff0 0.55vmin),
		radial-gradient(circle at 6% 68.5%, #fff 0.3vmin, #fff0 0.45vmin),
		radial-gradient(circle at 3.5% 65%, #fff 0.4vmin, #fff0 0.55vmin),
		/***yellow***/
			radial-gradient(ellipse at 36% 37%, var(--yellow) 0.8vmin, #fff0 0.9vmin),
		radial-gradient(circle at 36.5% 36%, var(--yellow) 0.5vmin, #fff0 0.6vmin),
		radial-gradient(circle at 37% 45%, var(--yellow) 0.7vmin, #fff0 0.8vmin),
		radial-gradient(ellipse at 35.5% 48.25%, var(--yellow) 0.7vmin, #fff0 0.8vmin),
		radial-gradient(circle at 35.25% 46.75%, var(--yellow) 0.3vmin, #fff0 0.4vmin),
		radial-gradient(ellipse at 24% 44%, var(--yellow) 0.6vmin, #fff0 0.7vmin),
		radial-gradient(ellipse at 23% 45%, var(--yellow) 0.6vmin, #fff0 0.7vmin),
		radial-gradient(ellipse at 22.5% 46%, var(--yellow) 0.5vmin, #fff0 0.6vmin),
		radial-gradient(circle at 25% 53%, var(--yellow) 0.8vmin, #fff0 0.9vmin),
		radial-gradient(circle at 26.5% 51.5%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
		radial-gradient(circle at 26.5% 49.5%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
		radial-gradient(circle at 25.5% 50%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
		radial-gradient(circle at 25.5% 73%, var(--yellow) 1.25vmin, #fff0 1.45vmin),
		/*** orange ***/
			radial-gradient(circle at 25.5% 73%, var(--orange) 1.75vmin, #fff0 1.95vmin),
		radial-gradient(circle at 23% 80%, var(--orange) 0.75vmin, #fff0 0.85vmin),
		radial-gradient(circle at 22.5% 76%, var(--orange) 0.65vmin, #fff0 0.75vmin),
		radial-gradient(circle at 22.5% 78%, var(--orange) 0.65vmin, #fff0 0.75vmin),
		radial-gradient(
			circle at 25.25% 79.25%,
			var(--orange) 0.65vmin,
			#fff0 0.75vmin
		),
		radial-gradient(
			circle at 24.25% 80.05%,
			var(--orange) 0.65vmin,
			#fff0 0.75vmin
		),
		radial-gradient(circle at 29.5% 86%, var(--yellow) 0.65vmin, #fff0 0.75vmin),
		radial-gradient(circle at 30.75% 86%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
		radial-gradient(ellipse at 35.5% 88%, var(--yellow) 0.75vmin, #fff0 0.875vmin),
		radial-gradient(ellipse at 19% 87%, var(--yellow) 0.65vmin, #fff0 0.75vmin),
		radial-gradient(ellipse at 19% 86%, var(--yellow) 0.65vmin, #fff0 0.75vmin),
		var(--black);

	width: 110%;
	height: 40%;
	border-radius: 100% 10%;
	transform: rotate(55deg) translate(2vmin, 4vmin);
	z-index: 2;
}
.wing > span:nth-child(1):before {
	background: radial-gradient(
			circle at 6.5% 10%,
			var(--yellow) 0.65vmin,
			#fff0 0.75vmin
		),
		radial-gradient(ellipse at 11% 72%, #fff 0.65vmin, #fff0 0.8vmin),
		radial-gradient(ellipse at 11% 73%, #fff 0.65vmin, #fff0 0.8vmin),
		radial-gradient(ellipse at 11% 73%, #fff 0.65vmin, #fff0 0.8vmin),
		radial-gradient(circle at 10% 47%, #fff 0.35vmin, #fff0 0.45vmin),
		radial-gradient(circle at 10% 49%, #fff 0.35vmin, #fff0 0.45vmin),
		radial-gradient(circle at 10% 51%, #fff 0.3vmin, #fff0 0.4vmin),
		radial-gradient(circle at 10% 52%, #fff 0.25vmin, #fff0 0.25vmin),
		radial-gradient(circle at 8% 33%, #fff 0.35vmin, #fff0 0.45vmin),
		radial-gradient(circle at 7% 31%, #fff 0.35vmin, #fff0 0.45vmin), var(--black);
	width: 60%;
	height: 60%;
	border-radius: 0 100% 0 48%;
	transform: rotate(-54deg) translate(2vmin, 15.35vmin);
}

.wing > span:nth-child(1):after {
	background: radial-gradient(circle at 50% 4%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 62% 15%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 58% 18%, #fff 0.45vmin, #fff0 0.6vmin),
		radial-gradient(circle at 63% 34%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 67% 31%, #fff 0.25vmin, #fff0 0.375vmin),
		radial-gradient(circle at 56% 47%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 56% 50%, #fff 0.2vmin, #fff0 0.325vmin),
		radial-gradient(circle at 53% 65%, #fff 0.3vmin, #fff0 0.45vmin),
		radial-gradient(circle at 53% 66%, #fff 0.3vmin, #fff0 0.45vmin),
		radial-gradient(circle at 53% 81%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(circle at 53% 78%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 53% 84%, #fff 0.375vmin, #fff0 0.475vmin),
		var(--black);
	width: 7%;
	height: 70%;
	border-radius: 0 100% 100% 100%;
	transform: rotate(-71deg) translate(-8.6vmin, 17.35vmin);
}
.wing:before {
	background: radial-gradient(
			circle at 43% 5%,
			#ffffff 0.25vmin,
			#fff0 0.375vmin
		),
		radial-gradient(ellipse at 65% 18%, #ffffff 0.25vmin, #fff0 0.375vmin),
		radial-gradient(circle at 60% 7%, #ffffff 0.25vmin, #fff0 0.375vmin),
		radial-gradient(ellipse at 80% 40%, #ffffff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 90% 50%, #ffffff 0.25vmin, #fff0 0.375vmin),
		radial-gradient(ellipse at 90% 53%, #ffffff 0.25vmin, #fff0 0.375vmin),
		radial-gradient(ellipse at 90% 56%, #ffffff 0.25vmin, #fff0 0.375vmin),
		var(--black);
	width: 20%;
	height: 21%;
	border-radius: 24% 50% 0% 100%;
	transform: rotate(-70deg) translate(2.25vmin, 0.35vmin);
}

.wing > span:nth-child(2) {
	background: radial-gradient(ellipse at 28% 10%, #ffffff 0.2vmin, #fff0 0.3vmin),
		radial-gradient(ellipse at 22% 15%, #ffffff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 20.75% 16.05%, #ffffff 0.45vmin, #fff0 0.55vmin),
		radial-gradient(ellipse at 19.75% 17.25%, #ffffff 0.4vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 19% 18.5%, #ffffff 0.35vmin, #fff0 0.45vmin),
		radial-gradient(ellipse at 18.5% 19.5%, #ffffff 0.25vmin, #fff0 0.35vmin),
		radial-gradient(ellipse at 13% 21%, #ffffff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 13% 22%, #ffffff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 13% 23%, #ffffff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 17% 27%, #ffffff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 17% 28%, #ffffff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 17% 29%, #ffffff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 10% 30%, #ffffff 0.4vmin, #fff0 0.55vmin),
		radial-gradient(ellipse at 9.75% 31%, #ffffff 0.4vmin, #fff0 0.55vmin),
		radial-gradient(ellipse at 9.5% 32%, #ffffff 0.4vmin, #fff0 0.55vmin),
		radial-gradient(ellipse at 9.15% 33%, #ffffff 0.3vmin, #fff0 0.45vmin),
		radial-gradient(ellipse at 10.5% 40%, #ffffff 0.45vmin, #fff0 0.6vmin),
		radial-gradient(circle at 10.5% 41%, #ffffff 0.45vmin, #fff0 0.6vmin),
		radial-gradient(ellipse at 10.5% 43%, #ffffff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 11% 44%, #ffffff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 5% 47%, #ffffff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 5.5% 48.25%, #ffffff 0.25vmin, #fff0 0.4vmin),
		radial-gradient(circle at 96.5% 31.25%, var(--orange) 1.25vmin, #fff0 1.5vmin),
		var(--black);
	width: 80%;
	height: 40%;
	border-radius: 90% 0% 100% 75%;
	transform: rotate(-7deg) translate(5vmin, 25vmin);
	z-index: 1;
}

.wing > span:nth-child(2):before {
	background: radial-gradient(ellipse at 10% 5%, #fff 0.5vmin, #fff0 0.7vmin),
		radial-gradient(ellipse at 3% 13%, #fff 0.5vmin, #fff0 0.7vmin),
		radial-gradient(ellipse at 8% 22%, #fff 0.5vmin, #fff0 0.7vmin),
		radial-gradient(ellipse at 3% 28%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 3% 29%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 3% 30%, #fff 0.3vmin, #fff0 0.4vmin),
		radial-gradient(ellipse at 3.5% 31%, #fff 0.25vmin, #fff0 0.4vmin),
		radial-gradient(ellipse at 13% 32%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 14% 33%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 14.75% 35%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 7% 38%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(circle at 7.5% 39.5%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 8% 42%, #fff 0.2vmin, #fff0 0.35vmin),
		radial-gradient(ellipse at 8.5% 43%, #fff 0.15vmin, #fff0 0.25vmin),
		radial-gradient(ellipse at 18% 48%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 17% 47%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 19% 49.5%, #fff 0.3vmin, #fff0 0.45vmin),
		radial-gradient(ellipse at 14% 58%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 15% 59%, #fff 0.5vmin, #fff0 0.65vmin),
		radial-gradient(ellipse at 28% 58%, #fff 0.65vmin, #fff0 0.8vmin),
		radial-gradient(ellipse at 26% 70%, #fff 0.35vmin, #fff0 0.5vmin),
		radial-gradient(ellipse at 39% 67%, #fff 0.35vmin, #fff0 0.5vmin).........完整代码请登录后点击上方下载按钮下载查看