HTML点击文字唱歌,HTML5 唱歌的骷髅

HTML点击文字唱歌,HTML5 唱歌的骷髅

CSS

语言：

CSSSCSS

确定

.eyes span::before,

.eyes span::after {

content: "";

height: 50%;

width: 100%;

background: #ebead5;

display: block;

}

@-webkit-keyframes blink-upper {

0% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

1% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

2% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

10% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

11% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

12% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

100% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

}

@keyframes blink-upper {

0% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

1% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

2% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

10% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

11% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

12% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

100% {

-webkit-transform: translateY(-110%);

transform: translateY(-110%);

}

}

@-webkit-keyframes blink-lower {

0% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

1% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

2% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

10% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

11% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

12% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

100% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

}

@keyframes blink-lower {

0% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

1% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

2% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

10% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

11% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

12% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

100% {

-webkit-transform: translateY(110%);

transform: translateY(110%);

}

}

@-webkit-keyframes sing {

0% {

height: 5px;

}

50% {

height: 13px;

}

100% {

height: 5px;

}

}

@keyframes sing {

0% {

height: 5px;

}

50% {

height: 13px;

}

100% {

height: 5px;

}

}

body {

background: #242122;

}

#skull {

height: 100vh;

}

.skull {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

width: 270px;

height: 235px;

margin: 0 auto;

border-radius: 20.76923px;

}

.forehead {

height: 162.06897px;

width: 270px;

background: #ebead5;

background: -webkit-linear-gradient(left, #c6c6b5 2%, #ebead5 30%);

background: linear-gradient(to right, #c6c6b5 2%, #ebead5 30%);

border-radius: 20.76923px 20.76923px 0 20.76923px;

position: relative;

}

.mouth {

background: yellow;

float: right;

border-radius: 0 0 20.76923px 20.76923px;

background: #ebead5;

height: auto;

padding: 10px 0px 20px 36px;

}

.teeth {

height: 5px;

width: 99px;

top: 55%;

background: #242122;

right: 0;

}

.jaw-upper {

width: 79px;

border-left: 5px solid #242122;

border-right: 5px solid #242122;

height: 10px;

background: rgba(255, 255, 255, 0.5);

background: -webkit-linear-gradient(left, transparent 30%, #242122 30%, #242122 36%, transparent 36%, transparent 64%, #242122 64%, #242122 70%, transparent 70%);

background: linear-gradient(to right, transparent 30%, #242122 30%, #242122 36%, transparent 36%, transparent 64%, #242122 64%, #242122 70%, transparent 70%);

}

.jaw-lower {

width: 79px;

border-left: 5px solid #242122;

border-right: 5px solid #242122;

height: 10px;

background: rgba(255, 255, 255, 0.5);

background: -webkit-linear-gradient(left, transparent 30%, #242122 30%, #242122 36%, transparent 36%, transparent 64%, #242122 64%, #242122 70%, transparent 70%);

background: linear-gradient(to right, transparent 30%, #242122 30%, #242122 36%, transparent 36%, transparent 64%, #242122 64%, #242122 70%, transparent 70%);

}

.back {

height: 78.33333px;

position: absolute;

top: 19.58333px;

left: 5px;

width: 112.5px;

background: -webkit-linear-gradient(left, rgba(235, 234, 213, 0) 50%, #c6c6b5 100%);

background: linear-gradient(to right, rgba(235, 234, 213, 0) 50%, #c6c6b5 100%);

border-radius: 0 20.76923px 20.76923px 0;

}

.eyes {

height: 78.33333px;

position: absolute;

top: 19.58333px;

right: 0px;

width: 135px;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: space-around;

-ms-flex-pack: distribute;

justify-content: space-around;

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

}

.eyes span {

height: 38.57143px;

width: 38.57143px;

background: #242122;

border-radius: 50%;

}

.eyes span::before {

-webkit-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);

-webkit-animation: blink-upper 4s ease-in-out infinite;

animation: blink-upper 4s ease-in-out infinite;

}

.eyes span::after {

-webkit-transform: translateY(100%);

-ms-transform: translateY(100%);

transform: translateY(100%);

-webkit-animation: blink-lower 4s ease-in-out infinite;

animation: blink-lower 4s ease-in-out infinite;

}

.is-singing .teeth {

-webkit-animation-delay: 1s;

animation-delay: 1s;

-webkit-animation: sing 1s ease-in infinite;

animation: sing 1s ease-in infinite;

}

.control {

height: 50px;

width: 50px;

position: fixed;

top: 15px;

right: 15px;

border-radius: 50%;

box-shadow: none;

/* W3C */

background: -webkit-radial-gradient(center, ellipse, #3f393b 0%, #000 100%);

background: radial-gradient(ellipse at center, #3f393b 0%, #000 100%);

}

.control:hover {

border-color: #927fbf;

/* W3C */

background: -webkit-radial-gradient(center, ellipse, #595254 0%, #000 100%);

background: radial-gradient(ellipse at center, #595254 0%, #000 100%);

}

#toggle {

height: 50px;

width: 50px;

background: transparent;

display: block;

border: 2px solid #c4bbf0;

position: absolute;

top: -2px;

left: -2px;

width: 100%;

height: 100%;

border-radius: 50%;

cursor: pointer;

}

#toggle:focus {

outline: none;

}

#toggle:hover {

border-color: #927fbf;

}

.music {

background: #c4bbf0;

height: 30px;

width: 3px;

margin: 7px auto;

position: relative;

}

.music::before {

content: "";

display: block;

position: absolute;

top: 0%;

left: 0;

width: 12px;

height: 20px;

border-width: 3px 1px 0 3px;

border-style: solid;

border-color: #c4bbf0 transparent transparent #c4bbf0;

background: transparent;

border-radius: 0 15px 0 0;

}

.music::after {

content: "";

display: block;

position: absolute;

height: 10px;

width: 13px;

top: calc(100% - 5px);

right: 0;

background: #c4bbf0;

border-radius: 7px 7px 7px 7px;

-webkit-transform: rotate(-12deg);

-ms-transform: rotate(-12deg);

transform: rotate(-12deg);

}

.is-singing .control #toggle {

background: -webkit-linear-gradient(45deg, transparent 0%, transparent 48%, #c4bbf0 48%, #c4bbf0 52%, transparent 52%, transparent 99%);

background: linear-gradient(45deg, transparent 0%, transparent 48%, #c4bbf0 48%, #c4bbf0 52%, transparent 52%, transparent 99%);

z-index: 100;

}