css熊猫动画

最新推荐文章于 2024-09-26 08:37:49 发布

Cocomr99

最新推荐文章于 2024-09-26 08:37:49 发布

阅读量630

点赞数

文章标签： css3donghua

</div>

.panda {
   top: 25%;
   left: 60%;
   width:21em;
   height:16em;
   background-color:white;
   background-image:radial-gradient(ellipse at 50% 60%,#333 1.2em,transparent 1.2em),radial-gradient(ellipse at 50% 80%,#555 0.6em,transparent 0.6em);
   border:0.5em solid #333;
   border-top-left-radius:11em;
   border-top-right-radius:11em;
   border-bottom-left-radius:11em 6em;
   border-bottom-right-radius:11em 6em;
   border-bottom-width:1em;
   box-shadow:inset 1em -1em 0 #eee;
   position:relative;
}
.panda::before,.panda::after {
   content:'';
   position:absolute;
   width:7em;
   height:4em;
}
.panda::before {
   content:'';
   position:absolute;
   width:7em;
   height:4em;
   left:2.9em;
   top:5.5em;
   background-color:#333;
   background-image:radial-gradient(circle at 5.1em 2em,white 0.3em,transparent 0.3em),radial-gradient(circle at 4.6em 2em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 4.5em 2em,white 1em,transparent 1em);
   border-radius:50% 50% 45% 42%;
   transform:rotate(-45deg);
   box-shadow:1em -7.2em 0 -0.4em #333;
   animation:before-animate 1s ease-in-out infinite alternate;
}
.panda::after {
   content:'';
   position:absolute;
   width:7em;
   height:4em;
   left:11.1em;
   top:5.5em;
   background-color:#333;
   background-image:radial-gradient(circle at 2.4em 1.5em,white 0.3em,transparent 0.3em),radial-gradient(circle at 2.4em 2em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 2.5em 2em,white 1em,transparent 1em);
   border-radius:50% 50% 42% 45%;
   transform:rotate(45deg);
   box-shadow:-1em -7.2em 0 -0.4em #333;
   animation:after-animate 1s ease-in-out infinite alternate -1s;
}
@keyframes before-animate {
   to {
   transform:rotate(-40deg);
   background-image:radial-gradient(circle at 4.9em 1.8em,white 0.3em,transparent 0.3em),radial-gradient(circle at 4.4em 1.8em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 4.5em 2em,white 1em,transparent 1em);
}
}@keyframes after-animate {
   to {
   transform:rotate(40deg);
   background-image:radial-gradient(circle at 2.6em 1.3em,white 0.3em,transparent 0.3em),radial-gradient(circle at 2.6em 1.8em,#333 0.7em,transparent 0.7em),radial-gradient(circle at 2.5em 2em,white 1em,transparent 1em);
}
}