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

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

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