div+css实现卡通可爱万圣节宠物效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现卡通可爱万圣节宠物效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body{
    background: radial-gradient(
		circle,
		#a08baf 81%,
		#9076a2 98%
	);
    margin: 5px 0;
    display: flex;
    justify-content: center;
}

div.bat-container{
    overflow: hidden;
    min-height: 300px;
    max-height: 500px;
    min-width: 300px;
    width: 99vw;
    height: 95vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.bat {
    width: 90%;
    height: 90%;
    max-height: 500px;
    max-width: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    animation: spinIn 5s linear 1;
}


@keyframes spinIn {
    0% {
        transform: rotate(0deg);
        left: -100%
    }
    100% {
        transform: rotate(360deg);
        left: 0%;

    }
}

@keyframes spinOut {
    0% {
        transform: rotate(0deg);
        left: 0%
    }
    100% {
        transform: rotate(360deg);
        left: 100%;

    }
}

div.body {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: #434343;
    position: relative;
    top: 25%;
    overflow: hidden;
}

div.body > .shading {
    position: absolute;
    top: -3%;
    border-radius: 50%;
    z-index: 999;
    left: -3%;
    width: 104%;
    height: 104%;
    box-shadow: inset -9px 0px #555454, inset -9px 0px 12px 12px #555454;
    mix-blend-mode: overlay;

}

div.row {
    display: flex;
    justify-content: space-between;
}

div.wing-row{
    position: absolute;
    width: 99%;
    top: 48%;
    height: 18%;
}

div.closed-wing-row {
    position: absolute;
    width: 100%;
    top: 36%;
    height: 32%;
    z-index: 9999;
}

div.wing {
    width: 45%;
    height: 100%;
    border-radius: 100% 100% 0% 0%;
    clip-path: polygon(1% 0%, 1% 100%, 7% 88%, 12% 100%, 19% 88%, 29% 100%, 34% 88%, 43% 100%, 51% 88%, 58% 99%, 65% 90%, 72% 99%, 82% 89%, 88% 100%, 94% 89%, 100% 100%, 100% 0%);
    background-color: #434343;
    box-shadow: inset 2px 6px 20px 6px #2e2e2e;

}

div.wing.open-wing {
    display: none
}

div.wing-row > div.wing:nth-child(1){
    animation: leftFlap 0.43s alternate  linear infinite
}

div.wing-row > div.wing:nth-child(2){
    animation: rightFlap 0.43s alternate  linear infinite

}

@keyframes leftFlap {
    100%{
        transform: rotateZ(10deg);
        
    }
}

@keyframes rightFlap {
    100%{
        transform: rotateZ(-10deg);
        
    }
}

div.ear-row {
    height: 35%;
    width: 70%;
    position: absolute;
    top: 5%;
    left: 14.5%;
}

div.ear {
    width: 48%;
    height: 100%;
    border-radius: 8% 50% 50% 50%;
    background-color: #434343;
    transform: rotate(29deg);
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: inset -2px 0px 12px 6px #2e2e2e;

}

div.ear:nth-child(2) {
    transform: rotate(58deg);    

}

div.ear > .inner-ear {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #ffb6c1;
    position: absolute;
    box-shadow: inset -2px 0px 12px 6px #f8788b;
}

div.ear:nth-child(1) > .inner-ear{
    left: -48%;
    bottom: -4%;
}

div.ear:nth-child(2) > .inner-ear{
    left: 4%;
    top: -49%;
}

div.eye-row {
    width: 55%;
    height: 55%;
    position: absolute;
    top: 16%;
    left: 22%;
}

div.eye {
    height: 38%;
    width: 38%;
    border: 2px solid white;
    background-color: black;
    border-radius: 50%;
    position: relative
}

div.eye > * {
    background-color: white;
    border-radius: 50%;
    width: 30%;
    height: 30%;
    position: absolute;
    top: 10%;
    right: 10%;
}

div.nose {
    background-color: #ffb6c1;
    border-radius: 50%;
    height: 5%;
    width: 5%;
    position: absolute;
    left: 47.5%;
    top: 34%;
}

div.mouth {
    background-color: black;
    width: 25%;
    height: 12.5%;
    position: absolute;
    border-radius: 25% 25% 120% 120%;
    display: flex;
    flex-direction: column;
    top: 43%;
    left: 37.5%;
    overflow: hid.........完整代码请登录后点击上方下载按钮下载查看