css实现可爱菠萝跳舞动画效果代码-html代码-BFW代码库

css实现可爱菠萝跳舞动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现可爱菠萝跳舞动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
body {
        background-color:#fafcb8
}
.pineapple {
        font-size:90vmin;
        height:1em;
        margin:5vmin auto;
        width:.9em;
        position:relative
}
.pineapple div {
        position:absolute
}
.leaf {
        background-color:darkgreen;
        border-radius:90% 0 90% 0;
        height:20%;
        top:10%;
        width:20%
}
.leaf.left {
        -webkit-animation:leafLeft .25s ease-in-out alternate infinite;
        animation:leafLeft .25s ease-in-out alternate infinite;
        left:50%;
        transform-origin:bottom left
}
.leaf.middle {
        -webkit-animation:leafMiddle .25s ease-in-out alternate infinite;
        animation:leafMiddle .25s ease-in-out alternate infinite;
        background-color:green;
        left:40%;
        top:5%;
        transform:rotate(-40deg)
}
.leaf.right {
        -webkit-animation:leafRight .25s ease-in-out alternate infinite;
        animation:leafRight .25s ease-in-out alternate infinite;
        left:50%;
        transform-origin:bottom left
}
.body {
        -webkit-animation:body .25s ease-in-out alternate infinite;
        animation:body .25s ease-in-out alternate infinite;
        background-color:#ffa700;
        border-radius:40%;
        height:50%;
        left:24%;
        top:27%;
        width:54%
}
.body::after {
        background:repeating-linear-gradient(-45deg,transparent,transparent 15%,darkorange 15%,darkorange 20%),repeating-linear-gradient(45deg,transparent,transparent 15%,darkorange 15%,darkorange 20%);
        border-radius:40%;
        content:"";
        height:100%;
        position:absolute;
        width:100%
}
.eye {
        -webkit-animation:eye 1.04s infinite;
        animation:eye 1.04s infinite;
        background-color:black;
        border-radius:100%;
        height:15%;
        top:35%;
        width:15%;
        z-index:2
}
.eye.left {
        left:25%
}
.eye.right {
        right:25%
}
.mouth {
        background-color:black;
        border-radius:20% 20% 80% 80%;
        height:12%;
        left:41%;
        top:50%;
        width:18%;
        z-inde.........完整代码请登录后点击上方下载按钮下载查看