🐒个人主页
🏅Vue项目常用组件模板仓库
📖前言：
本篇博客主要提供背景【煽动的蝴蝶源码】组件源码，需要的朋友请自取
🎀源码如下：
文件夹位置
背景图片：
index源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>butterfly</title>
<style>
body{
background: url("./images/bg.jpg") no-repeat;
background-size: 100% 100vh;
}
#butterfly{
width: 600px;
height: 500px;
position: absolute;
left: 10px;
transform: scale(0.35);
transform-style: preserve-3d;
}
.leftSide{
width: 267px;
height: 421px;
background: url("./images/leftSide.png") no-repeat;
position: absolute;
left: 26px;
top: 40px;
animation: left 2s infinite;
z-index: 9999;
}
@keyframes left {
0%{
transform: rotateY(0deg);
transform-origin: right center;
perspective: 201px;
}
50%{
transform: rotateY(70deg);
transform-origin: right center;
perspective: 201px;
}
100%{
transform: rotateY(0deg);
transform-origin: right center;
perspective: 201px;
}
}
@keyframes right {
0%{
transform: rotateY(0);
transform-origin: left center;
perspective: 201px;
}
50%{
transform: rotateY(-70deg);
transform-origin: left center;
perspective: 201px;
}
100%{
transform: rotateY(0);
transform-origin: left center;
perspective: 201px;
}
}
.body{
width: 152px;
height: 328px;
background: url("./images/body.png") no-repeat;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 9999;
}
.rightSide{
width: 284px;
height: 460px;
background: url("./images/rightSide.png") no-repeat;
position: absolute;
right: 26px;
top: 58px;
animation: right 2s infinite;
z-index: 9999;
}
</style>
</head>
<body>
<div id="butterfly">
<div class="leftSide"></div>
<div class="body"></div>
<div class="rightSide"></div>
</div>
</body>
</html>
![[MySQL] MySQL中的事物](https://img-blog.csdnimg.cn/direct/c8e8831883dd4247a7a7778d99ff5831.gif)
