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(
	.........完整代码请登录后点击上方下载按钮下载查看