<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 骷髅跳舞动画</title>
<style>
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100vh;
margin: 0;
}
.skeleton-cont {
width: 305px;
height: 305px;
}
.skeleton {
color: #fff;
width: 100px;
height: 305px;
margin: auto;
position: relative;
transform: rotate(0deg);
transform-origin: 50% 120px;
}
.skeleton div {
position: absolute;
transform-style: preserve-3d;
}
.skull,
.mouth {
background: #dcc8aa;
}
.head {
width: 30px;
height: 40px;
left: 35px;
}
.skull {
border-radius: 50% 50% 5px 5px;
width: 30px;
height: 25px;
}
.skull::before {
background: #37322b;
border-radius: 50%;
box-shadow: 12.5px 0 0 #37322b;
content: "";
display: block;
margin: 12.5px 0 0 4px;
width: 10px;
height: 10px;
}
.mouth {
border-radius: 0 0 50% 50%;
top: 25px;
left: 5px;
width: 20px;
height: 15px;
}
.mouth::before,
.mouth::after {
display: block;
}
.mouth::before {
background: #37322b;
border-radius: 10px 10px 0 0;
content: "";
width: 5px;
height: 6px;
margin: -5px 0 0 7.5px;
}
.mouth::after {
border-color: transparent transparent #37322b transparent;
border-radius: 0 0 50% 50%;
border-style: solid;
border-width: 0 0 1.5px 0;
color: #37322b;
content: "| | | | |";
font-size: 7.5px;
width: 20px;
height: 5px;
line-height: 11.5px;
margin: 0 auto;
text-align: center;
}
.shoulders {
background: #dcc8aa;
top: 0;
left: 0;
width: 50px;
height: 5px;
}
.ribcage {
width: 50px;
height: 60px;
top: 45px;
left: -10px;
}
.ribcage::before,
.ribcage::after {
border: 4px solid #dcc8aa;
content: "";
display: block;
position: absolute;
width: 17px;
height: 52px;
}
.ribcage::before {
background-image: linear-gradient(10deg, transparent, transparent 8%, #dcc8aa 8%, #dcc8aa 16%, transparent 16%, transparent 24%, #dcc8aa 24%, #dcc8aa 32%, transparent 32%, transparent 40%, #dcc8aa 40%, #dcc8aa 48%, transparent 48%, transparent 56%, #dcc8aa 56%, #dcc8aa 64%, transparent 64%, transparent 72%, #dcc8aa 72%, #dcc8aa 80%, transparent 80%, transparent 88%, #dcc8aa 88%, #dcc8aa 96%, transparent 96%, transparent);
border-radius: 25px 0 100% 10px;
}
.ribcage::after {
background-image: linear-gradient(-10deg, transparent, transparent 8%, #dcc8aa 8%, #dcc8aa 16%, transparent 16%, transparent 24%, #dcc8aa 24%, #dcc8aa 32%, transparent 32%, transparent 40%, #dcc8aa 40%, #dcc8aa 48%, transparent 48%, transparent 56%, #dcc8aa 56%, #dcc8aa 64%, transparent 64%, transparent 72%, #dcc8aa 72%, #dcc8aa 80%, transparent 80%, transparent 88%, #dcc8aa 88%, #dcc8aa 96%, transparent 96%, transparent);
border-radius: 0 25px 10px 100%;
left: 50%;
}
.spine {
background-image: linear-gradient(90deg, transparent 20%, #dcc8aa 20%, #dcc8aa 80%, transparent 80%, transparent), linear-gradient(transparent 4px, #dcc8aa 4px, #dcc8aa 5px, transparent 5px, transparent 9px, #dcc8aa 9px, #dcc8aa 10px, transparent 10px, transparent 14px, #dcc8aa 14px, #dcc8aa 15px, transparent 15px, transparent 19px, #dcc8aa 19px, #dcc8aa 20px, transparent 20px, transparent 24px, #dcc8aa 24px, #dcc8aa 25px, transparent 25px, transparent 29px, #dcc8aa 29px, #dcc8aa 30px, transparent 30px, transparent 34px, #dcc8aa 34px, #dcc8aa 35px, transparent 35px, transparent 39px, #dcc8aa 39px, #dcc8aa 40px, transparent 40px, transparent 44px, #dcc8aa 44px, #dcc8aa 45px, transparent 45px, transparent 49px, #dcc8aa 49px, #dcc8aa 50px, transparent 50px, transparent 54px, #dcc8aa 54px, #dcc8aa 55px, transparent 55px, transparent 59px, #dcc8aa 59px, #dcc8aa 60px, transparent 60px, transparent 64px, #dcc8aa 64px, #dcc8aa 65px, transparent 65px, transparent 69px, #dcc8aa 69px, #dcc8aa 70px, transparent 70px, transparent 74px, #dcc8aa 74px, #dcc8aa 75px, transparent 75px, transparent 79px, #dcc8aa 79px, #dcc8aa 80px, transparent 80px, transparent);
width: 15px;
height: 95px;
top: -6px;
left: 17.5px;
}
.hips {
width: 50px;
height: 40px;
top: 75px;
}
.hips::before,
.hips::after {
content: "";
display: block;
}
.hips::before {
background: #dcc8aa;
border-radius: 50%;
box-shadow: 30px 0 0 #dcc8aa;
width: 25px;
height: 25px;
margin-left: -2.5px;
}
.hips::after {
border: 0 solid #dcc8aa;
border-radius: 15px 0 10px 0;
border-width: 6px 3px 3px 6px;
margin: -15px auto;
width: 13px;
height: 13px;
transform: rotate(45deg);
}
.ur-arm,
.lr-arm,
.ul-arm,
.ll-arm,
.r-femur,
.l-femur,
.r-shin,
.l-shin {
width: 15px;
}
.ur-arm::before,
.ur-arm::after,
.lr-arm::before,
.lr-arm::after,
.ul-arm::before,
.ul-arm::after,
.ll-arm::before,
.ll-arm::after,
.r-femur::before,
.r-femur::after,
.l-femur::before,
.l-femur::after,
.r-shin::before,
.r-shin::after,
.l-shin::before,
.l-shin::after {
background: #dcc8aa;
content: "";
display: block;
width: 15px;
height: 12.5px;
position: absolute;
}
.ur-arm::before,
.lr-arm::before,
.ul-arm::before,
.ll-arm::before,
.r-femur::before,
.l-femur::before,
.r-shin::before,
.l-shin::before {
border-radius: 20% 20% 50% 50%;
top: 0;
}
.ur-arm::after,
.lr-arm::after,
.ul-arm::after,
.ll-arm::after,
.r-femur::after,
.l-femur::after,
.r-shin::after,
.l-shin::after {
border-radius: 50% 50% 20% 20%;
bottom: 0;
}
.ur-arm,
.lr-arm,
.ul-arm,
.ll-arm {
height: 50px;
}
.r-femur,
.l-femur,
.r-shin,
.l-shin {
height: 60px;
}
.ur-arm,
.ul-arm {
transform-origin: 7.5px 7.5px;
}
.ur-arm,
.ul-arm,
.r-femur,
.l-femur {
background-image: linear-gradient(90deg, transparent 25%, #dcc8aa 25%, #dcc8aa 75%, transparent 75%, transparent);
}
.lr-arm,
.ll-arm,
.r-shin,
.l-shin {
background-image: linear-gradient(90deg, transparent 15%, #dcc8aa 15%, #dcc8aa 40%, transparent 40%, transparent 60%, #dcc8aa 60%, #dcc8aa 85%, transparent 85%, transparent);
top: 50px;
}
.lr-arm,
.ll-arm,
.r-hand,
.l-hand {
transform-origin: 7.5px 0;
}
.ur-arm {
left: -15px;
}
.ul-arm {
right: -15px;
}
.r-hand,
.l-hand {
border-radius: 5px 5px 0 0;
top: 50px;
overflow: hidden;
width: 15px;
height: 30px;
}
.r-hand::before,
.r-hand::after,
.l-hand::before,
.l-hand::after {
background: #dcc8aa;
content: "";
display: block;
}
.r-hand::before,
.l-hand::before {
border-radius: 50% 50% 0 0;
width: 15px;
height: 7.5px;
}
.r-hand::after,
.l-hand::after {
margin: auto;
width: 2px;
height: 22.5px;
}
.r-hand::after {
box-shadow: 6.6px -9px #dcc8aa, 3.3px -2px #dcc8aa, -3.3px -2px #dcc8aa, -6.6px -6px #dcc8aa;
}
.l-hand::after {
box-shadow: 6.6px -6px #dcc8aa, 3.3px -2px #dcc8aa, -3.3px -2px #dcc8aa, -6.6px -9px #dcc8aa;
}
.r-femur,
.l-femur {
top: 25px;
transform-origin: 7.5px 7.5px;
}
.r-shin,
.l-shin {
transform-origin: 7.5px 0;
}
.l-femur {
right: 0;
}
.r-shin,
.l-shin {
top: 60px;
}
.r-foot,
.l-foot {
width: 15px;
height: 40px;
top: 60px;
transform-origin: 7.5px 7.5px;
}
.r-foot::before,
.r-foot::after,
.l-foot::before,
.l-foot::after {
background: #dcc8aa;
content: "";
display: block;
}
.r-foot::before,
.l-foot::before {
border-radius: 50% 50% 0 0;
width: 15px;
height: 15px;
}
.r-foot::after,
.l-foot::after {
