css实现熊猫看着蝴蝶飞舞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现熊猫看着蝴蝶飞舞动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
    	margin:0;
    	padding:0;
    	font-size:20px;
    }
    @media (min-width:420px) and (min-height:350px) {
    	html,body {
    	font-size:30px;
    }
    }@media (min-width:620px) and (min-height:450px) {
    	html,body {
    	font-size:40px;
    }
    }@media (min-width:768px) and (min-height:530px) {
    	html,body {
    	font-size:50px;
    }
    }body {
    	width:100vw;
    	height:100vh;
    	background:url("//repo.bfw.wiki/bfwrepo/image/61bb2407955ad.png") center/cover no-repeat rgba(183,167,143,0.89);
   
    	display:grid;
    	justify-content:center;
    	align-content:center;
    }
    .container {
    	width:9rem;
    	height:10rem;
    	position:relative;
    	display:grid;
    	justify-content:center;
    	align-content:end;
    }
    .disclaimer {
    	position:absolute;
    	padding:0.2rem;
    	bottom:0;
    	right:0;
    	font-size:14px;
    	font-family:monospace;
    	color:#efefef;
    	opacity:0.5;
    }
    .disclaimer:hover {
    	opacity:1;
    }
    .disclaimer a {
    	text-decoration:none;
    	color:inherit;
    }
    .disclaimer a:hover {
    	text-decoration:underline;
    }
    @keyframes rotate {
    	0% {
    	transform:rotate(25deg);
    }
    50% {
    	transform:rotate(-25deg);
    }
    100% {
    	transform:rotate(25deg);
    }
    }.butterfly-rotate {
    	position:absolute;
    	width:2.5rem;
    	top:0.5rem;
    	right:0;
    	animation:rotate 3s -2.25s ease-in-out infinite;
    }
    @keyframes box-move {
    	0% {
    	transform:translateX(-1rem);
    }
    50% {
    	transform:translateX(1.4rem);
    }
    100% {
    	transform:translateX(-1rem);
    }
    }.butterfly-box {
    	animation:box-move 3s ease-in-out infinite;
    }
    @keyframes move {
    	0% {
    	transform:translateY(0.2rem);
    }
    100% {
    	transform:translateY(0.6rem);
    }
    }.butterfly {
    	display:flex;
    	justify-content:center;
    	align-items:flex-end;
    	animation:move 3s infinite alternate;
    	opacity:0.8;
    }
    .butterfly .main {
    	width:0.3rem;
    	height:0.6rem;
    	margin:0 0.1rem 0.35rem;
    	box-sizing:border-box;
    	border-top:0.6rem solid #000;
    	border-left:0.15rem solid transparent;
    	border-bottom:0;
    	border-right:0.15rem solid transparent;
    	opacity:0.7;
    }
    .butterfly .wing {
    	width:0.8rem;
    	height:1.4rem;
    	position:relative;
    	opacity:1;
    }
    .butterfly .wing::before,.butterfly .wing::after {
    	content:"";
    	display:inline-block;
    	box-sizing:border-box;
    }
    .butterfly .wing-right {
    	transform-origin:left center;
    	transform:rotateY(75deg);
    	animation:flap 0.35s ease-in-out infinite;
    }
    .butterfly .wing-right::before {
    	border-left:0;
    	border-right:0.8rem solid #e6d260;
    	border-bottom:0.4rem solid transparent;
    	border-top:0.6rem solid transparent;
    }
    .butterfly .wing-right::after {
    	position:absolute;
    	bottom:0;
    	left:0;
    	border-right:0;
    	border-left:0.5rem solid #e6d260;
    	border-bottom:0.3rem solid transparent;
    	border-top:0.3rem solid transparent;
    	transform-origin:top left;
    	transform:rotate(-5deg);
    }
    .butterfly .wing-left {
    	transform-origin:right center;
    	transform:rotateY(75deg);
    	animation:flap 0.35s ease-in-out infinite;
    }
    .butterfly .wing-left::before {
    	border-right:0;
    	border-left:0.8rem solid #e6d260;
    	border-bottom:0.4rem solid transparent;
    	border-top:0.6rem solid transparent;
    }
    .butterfly .wing-left::after {
    	position:absolute;
    	bottom:0;
    	right:0;
    	border-left:0;
    	border-right:0.5rem solid #e6d260;
    	border-bottom:0.3rem solid transparent;
    	border-top:0.3rem solid transparent;
    	transform-origin:top right;
    	transform:rotate(5deg);
    }
    @keyframes flap {
    	0% {
    	transform:rotateY(0deg);
    }
    45% {
    	transform:rotateY(75deg);
    }
    100% {
    	transform:rotateY(0deg);
    }
    }.panda {
    	opacity:1;
    	display:grid;
    	justify-content:center;
    	align-content:flex-end;
    	position:relative;
    	padding-bottom:0.5rem;
    }
    .head {
    	position:relative;
    	height:2.5rem;
    	transform:rotate(-3deg) translateX(-0.2rem);
    }
    .head .main {
    	width:3.8rem;
    	height:2rem;
    	margin-right:0.2rem;
    	background-color:#efefef;
    	border-radius:5rem 4rem 0 0;
    	transform:rotate(-6deg) translateY(10%);
    }
    .head .main::before {
    	content:"";
    	display:block;
    	width:100%;
    	height:100%;
    	background-color:#efefef;
    	position:absolute;
    	border-radius:40% 50%;
    	top:60%;
    	left:0;
    }
    .head .forehead {
    	background-color:#efefef;
    	width:3.75rem;
    	height:1.5rem;
    	position:absolute;
    	right:0;
    	top:10%;
    	border-radius:50% 50% 50% 50% / 100% 100% 0% 0%;
    }
    .head .snout {
    	width:2.2rem;
    	height:2rem;
    	background-color:#efefef;
    	position:absolute;
    	border-radius:0 2px 1.5rem 0;
    	top:1.3rem;
    	right:-0.35rem;
    	overflow:hidden;
    	transform:rotate(-2deg);
    }
    .head .snout::after {
    	content:"";
    	display:block;
    	position:absolute;
    	background-color:#000;
    	width:0.27rem;
    	height:1rem;
    	right:0;
    	transform-origin:top left;
    	transform:rotate(-25deg);
    }
    .head .eye {
    	width:0.7rem;
    	height:1rem;
    	background-color:#0.........完整代码请登录后点击上方下载按钮下载查看