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

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

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