css实现飞行中的科斯莫小狗动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现飞行中的科斯莫小狗动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
.white {
background-color: white !important;
}
.darkwhite {
background-color: #f7f7f7 !important;
}
.darkerwhite {
background-color: #eaeaea !important;
}
.gray {
background-color: #7d7d7d !important;
}
.darkgray {
background-color: #636363 !important;
}
.darkergray {
background-color: #535353 !important;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #9eecff;
margin: 0;
overflow: hidden;
}
.dog {
width: 180px;
height: 180px;
position: relative;
left: 30px;
top: 60px;
animation: upNdown 5s ease-in-out infinite;
}
.dog * {
position: absolute;
left: 0;
top: 0;
}
.body {
background-color: #7d7d7d;
}
.body1 {
width: 117%;
height: 60%;
border-radius: 0 39% 78% 30%/0 32% 60% 60%;
}
.body2 {
width: 80%;
height: 30%;
top: -5%;
left: 3%;
transform: rotate(32deg);
}
.body3 {
width: 46%;
height: 64%;
top: -24%;
left: -15%;
border-radius: 100% 0 0 0/100% 0 0 0;
transform: rotate(-35deg);
}
.body4 {
width: 31%;
height: 38%;
top: -40%;
left: -2%;
transform: rotate(-20deg);
}
.head {
background-color: #f7f7f7;
}
.head1, .head2 {
width: 50%;
height: 56%;
top: -68%;
left: -17%;
border-radius: 41% 53% 21% 0/26% 33% 63% 0;
}
.head2 {
top: -72%;
left: -22%;
}
.head3 {
width: 50%;
height: 50%;
top: -56%;
left: -60%;
transform: rotate(-16deg);
border-radius: 20% 10% 10% 20%/40% 41% 50% 60%;
}
.head4 {
width: 10%;
height: 10%;
top: -10%;
left: -46%;
transform: rotate(-45deg);
border-radius: 0% 0% 0% 36%/0% 0% 0% 20%;
}
.head5 {
width: 27%;
height: 20%;
top: -23%;
left: -44%;
transform: rotate(23deg);
border-radius: 0% 0% 66% 0%/0% 0% 20% 0%;
}
.ear {
background-color: #636363;
width: 30%;
height: 30%;
top: -80%;
left: -1%;
border-radius: 120% 30% 30% 30%/120% 30% 30% 30%;
transform: rotate(45deg);
}
.eye {
background-color: black;
width: 13%;
height: 13%;
top: -57%;
left: -21%;
border-radius: 100%;
animation: blink 10s linear infinite;
}
.nose {
background-color: black;
width: 12%;
height: 14%;
top: -50%;
left: -61%;
border-radius: 33% 12% 80% 11%/60% 13% 80% 10%;
}
.tail {
background-color: #7d7d7d;
width: 9%;
height: 13%;
top: 0%;
left: 107%;
transform: rotate(55deg);
border-radius: 10% 30% 0% 0%/70% 60% 0% 0%;
transform-origin: 30% 80%;
animation: wiggle 0.5s ease-out infinite;
}
.tail::after {
content: "";
display: block;
position: absolute;
background-color: inherit;
border: inherit;
width: 82%;
height: 80%;
left: 5%;
top: -58%;
transform: rotate(-10deg);
border-radius: 40% 40% 0% 0%/70% 60% 0% 0%;
animation: wiggle2 0.5s ease-out infinite;
transform-origin: 30% 80%;
animation-delay: 0.1s;
}
.shoulder {
background-color: #636363;
}
.shoulder1, .shoulder3 {
width: 30%;
height: 38%;
top: 24%;
left: 19%;
border-radius: 50% 40% 40% 36%/40% 40% 40% 40%;
transform: rotate(-38deg);
animation: shoulder1Hang 5s ease-out infinite;
}
.shoulder2 {
width: 28%;
height: 41%;
top: 21%;
left: 78%;
border-radius: 62% 60% 30% 60%/66% 40% 50% 30%;
transform: rotate(-120deg);
animation: shoulder2Hang 5s ease-out infinite;
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0