css 画的动画表情
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.emoji {
width: 120px;
height: 120px;
margin: 15px 15px 40px;
background: #FFDA6A;
display: inline-block;
border-radius: 50%;
position: relative;
} .emoji:after {
position: absolute;
bottom: -40px;
font-size: 18px;
width: 60px;
left: calc(50% - 30px);
color: #8A8A8A;
} .emoji__face,
.emoji__eyebrows,
.emoji__eyes,
.emoji__mouth,
.emoji__tongue,
.emoji__heart,
.emoji__hand,
.emoji__thumb {
position: absolute;
} .emoji__face:before,
.emoji__face:after,
.emoji__eyebrows:before,
.emoji__eyebrows:after,
.emoji__eyes:before,
.emoji__eyes:after,
.emoji__mouth:before,
.emoji__mouth:after,
.emoji__tongue:before,
.emoji__tongue:after,
.emoji__heart:before,
.emoji__heart:after,
.emoji__hand:before,
.emoji__hand:after,
.emoji__thumb:before,
.emoji__thumb:after {
position: absolute;
content: '';
} .emoji__face {
width: inherit;
height: inherit;
} .emoji--like {
background: #548DFF;
} .emoji--like:after {
content: '';
} .emoji--like .emoji__hand {
left: 25px;
bottom: 30px;
width: 20px;
height: 40px;
background: #FFFFFF;
border-radius: 5px;
z-index: 0;
-webkit-animation: hands-up 2s linear infinite;
animation: hands-up 2s linear infinite;
} .emoji--like .emoji__hand:before {
left: 25px;
bottom: 5px;
width: 40px;
background: inherit;
height: 10px;
border-radius: 2px 10px 10px 2px;
box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF;
} .emoji--like .emoji__thumb {
border-bottom: 20px solid #FFFFFF;
border-left: 20px solid transparent;
top: -25px;
right: -25px;
z-index: 2;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-animation: thumbs-up 2s linear infinite;
animation: thumbs-up 2s linear infinite;
} .emoji--like .emoji__thumb:before {
border-radius: 50% 50% 0 0;
background: #FFFFFF;
width: 10px;
height: 12px;
left: -10px;
top: -8px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
box-shadow: -1px 4px 0 -1px #FFFFFF;
} .emoji--love {
background: #F55064;
} .emoji--love:after {
content: '';
} .emoji--love .emoji__heart {
left: calc(50% - 40px);
top: calc(50% - 40px);
width: 80px;
height: 80px;
-webkit-animation: heart-beat 1s linear infinite alternate;
animation: heart-beat 1s linear infinite alternate;
} .emoji--love .emoji__heart:before,
.emoji--love .emoji__heart:after {
left: calc(50% - 20px);
top: calc(50% - 32px);
width: 40px;
height: 64px;
background: #FFFFFF;
border-radius: 20px 20px 0 0;
} .emoji--love .emoji__heart:before {
-webkit-transform: translate(20px) rotate(-45deg);
transform: translate(20px) rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
} .emoji--love .emoji__heart:after {
-webkit-transform: translate(-20px) rotate(45deg);
transform: translate(-20px) rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
} .emoji--haha:after {
content: '';
} .emoji--haha .emoji__face {
-webkit-animation: haha-face 2s linear infinite;
animation: haha-face 2s linear infinite;
} .emoji--haha .emoji__eyes {
width: 26px;
height: 6px;
border-radius: 2px;
left: calc(50% - 13px);
top: 35px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
background: transparent;
box-shadow: -25px 5px 0 0 #000000, 25px -5px 0 0 #000000;
} .emoji--haha .emoji__eyes:after {
left: 0;
top: 0;
width: 26px;
height: 6px;
border-radius: 2px;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
background: transparent;
box-shadow: -25px -5px 0 0 #000000, 25px 5px 0 0 #000000;
} .emoji--haha .emoji__mouth {
width: 80px;
height: 40px;
left: calc(50% - 40px);
top: 50%;
background: #000000;
border-radius: 0 0 40px 40px;
overflow: hidden;
z-index: 1;
-webkit-animation: haha-mouth 2s linear infinite;
animation: haha-mouth 2s linear infinite;
} .emoji--haha .emoji__tongue {
width: 70px;
height: 30px;
background: #F55064;
left: calc(50% - 35px);
bottom: -10px;
border-radius: 50%;
} .emoji--yay:after {
content: '';
-webkit-animation: yay-reverse 1s linear infinite;
animation: yay-reverse 1s linear infinite;
} .emoji--yay .emoji__face {
-webkit-animation: yay 1s linear infinite alternate;
animation: yay 1s linear infinite alternate;
} .emoji--yay .emoji__eyebrows {
left: calc(50% - 3px);
top: 30px;
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -6px 0 0 0 #000000, -36px 0 0 0px #000000, 6px 0 0 0 #000000, 36px 0 0 0px #000000;
} .emoji--yay .emoji__eyebrows:before,
.emoji--yay .emoji__eyebrows:after {
width: 36px;
height: 18px;
border-radius: 60px 60px 0 0;
background: transparent;
border: 6px solid black;
box-sizing: border-box;
border-bottom: 0;
bottom: 3px;
left: calc(50% - 18px);
} .emoji--yay .emoji__eyebrows:before {
margin-left: -21px;
} .emoji--yay .emoji__eyebrows:after {
margin-left: 21px;
} .emoji--yay .emoji__mouth {
top: 60px;
background: transparent;
left: 50%;
} .emoji--yay .emoji__mouth:after {
width: 80px;
height: 80px;
left: calc(50% - 40px);
top: -75px;
border-radius: 50%;
background: transparent;
border: 6px solid #000000;
box-sizing: border-box;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
z-index: 1;
} .emoji--yay .emoji__mouth:before {
width: 6px;
height: 6px;
background: transparent;
border-radius: 50%;
bottom: 5px;
left: calc(50% - 3px);
box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -35px -2px 30px 10px #D5234C, 35px -2px 30px 10px #D5234C;
} .emoji--wow:after {
content: '';
} .emoji--wow .emoji__face {
-webkit-animation: wow-face 3s linear infinite;
animation: wow-face 3s linear infinite;
} .emoji--wow .emoji__eyebrows {
left: calc(50% - 3px);
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -18px 0 0 0 #000000, -33px 0 0 0 #000000, 18px 0 0 0 #000000, 33px 0 0 0 #000000;
-webkit-animation: wow-brow 3s linear infinite;
animation: wow-brow 3s linear infinite;
} .emoji--wow .emoji__eyebrows:before,
.emoji--wow .emoji__eyebrows:after {
width: 24px;
height: 20px;
border: 6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: -3px;
left: calc(50% - 12px);
} .emoji--wow .emoji__eyebrows:before {
margin-left: -25px;
} .emoji--wow .emoji__eyebrows:after {
margin-left: 25px;
} .emoji--wow .emoji__eyes {
width: 16px;
height: 24px;
left: calc(50% - 8px);
top: 35px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;
} .emoji--wow .emoji__mouth {
width: 30px;
height: 45px;
left: calc(50% - 15px);
top: 50%;
border-radius: 50%;
background: #000000;
-webkit-animation: wow-mouth 3s linear infinite;
animation: wow-mouth 3s linear infinite;
} .emoji--sad:after {
content: '';
} .emoji--sad .emoji__face {
-webkit-animation: sad-face 2s ease-in infinite;
animation: sad-face 2s ease-in infinite;
} .emoji--sad .emoji__eyebrows {
left: calc(50% - 3px);
top: 35px;
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -40px 9px 0 0 #000000, -25px 0 0 0 #000000, 25px 0 0 0 #000000, 40px 9px 0 0 #000000;
} .emoji--sad .emoji__eyebrows:before,
.emoji--sad .emoji__eyebrows:after {
width: 30px;
height: 20px;
border: 6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: 2px;
left: calc(50% - 15px);
} .emoji--sad .emoji__eyebrows:before {
margin-left: -30px;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
} .emoji--sad .emoji__eyebrows:after {
margin-left: 30px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
} .emoji--sad .emoji__eyes {
width: 14px;
height: 16px;
left: calc(50% - 7px);
top: 50px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;
} .emoji--sad .emoji__eyes:after {
background: #548DFF;
width: 12px;
height: 12px;
margin-left: 6px;
border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: tear-drop 2s ease-in infinite;
animation: tear-drop 2s ease-in infinite;
} .emoji--sad .emoji__mouth {
width: 60px;
height: 80px;
left: calc(50% - 30px);
top: 80px;
box-sizing: border-box;
border: 6px solid #000000;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
background: transparent;
-webkit-animation: sad-mouth 2s ease-in infinite;
animation: sad-mouth 2s ease-in infinite;
} .emoji--sad .emoji__mouth:after {
width: 6px;
height: 6px;
background: transparent;
border-radius: 50%;
top: 4px;
left: calc(50% - 3px);
box-shadow: -18px 0 0 0 #000000, 18px 0 0 0 #000000;
} .emoji--angry {
background: -webkit-linear-gradient(#D5234C -10%, #FFDA6A);
background: linear-gradient(#D5234C -10%, #FFDA6A);
background-size: 100%;
-webkit-animation: angry-color 2s ease-in infinite;
animation: angry-color 2s ease-in infinite;
} .emoji--angry:after {
content: '';
} .emoji--angry .emoji__face {
-webkit-animation: angry-face 2s ease-in infinite;
animation: angry-face 2s ease-in infinite;
} .emoji--angry .emoji__eyebrows {
left: calc(50% - 3px);
top: 55px;
height: 6px;
width: 6px;
border-radius: 50%;
background: transparent;
box-shadow: -44px 5px 0 0 #000000, -7px 16px 0 0 #000000, 7px 16px 0 0 #000000, 44px 5px 0 0 #000000;
} .emoji--angry .emoji__eyebrows:before,
.emoji--angry .emoji__eyebrows:after {
width: 50px;
height: 20px;
border: 6px solid #000000;
box-sizing: border-box;
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
top: 0;
left: calc(50% - 25px);
} .emoji--angry .emoji__eyebrows:before {
margin-left: -25px;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
} .emoji--angry .emoji__eyebrows:after {
margin-left: 25px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
} .emoji--angry .emoji__eyes {
width: 12px;
height: 12px;
left: calc(50% - 6px);
top: 70px;
border-radius: 50%;
background: transparent;
box-shadow: 25px 0 0 0 #000000, -25px 0 0 0 #000000;
} .emoji--angry .emoji__mouth {
width: 36px;
height: 18px;
left: calc(50% - 18px);
bottom: 15px;
background: #000000;
border-radius: 50%;
-webkit-animation: angry-mouth 2s ease-in infinite;
animation: angry-mouth 2s ease-in infinite;
} @-webkit-keyframes heart-beat {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
} 75% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
} @keyframes heart-beat {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
} 75% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
} @-webkit-keyframes haha-face {
10% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
} 20% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
} 30% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
} 40% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
} 50% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
} 60% {
-webkit-transform: translateY(0);
transform: translateY(0);
} 70% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
} 80% {
-webkit-transform: translateY(0);
transform: translateY(0);
} 90% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
} @keyframes haha-face {
10% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
} 20% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
} 30% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
} 40% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
} 50% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
} 60% {
-webkit-transform: translateY(0);
transform: translateY(0);
} 70% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
} 80% {
-webkit-transform: translateY(0);
transform: translateY(0);
} 90% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
} @-webkit-keyframes haha-mouth {
10% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
} 20% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
} 30% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
} 40% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
} 50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
} 60% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
} 70% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
top: 50%;
} 80% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
} 90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
top: 50%;
}
} @keyframes haha-mouth {
10% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
} 20% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
} 30% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
} 40% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
} 50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
} 60% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
} 70% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
top: 50%;
} 80% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
} 90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
top: 50%;
}
} @-webkit-keyframes yay {
25% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
} 75% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
} @keyframes yay {
25% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
} 75% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
} @-webkit-keyframes wow-face { 15%,
25% {
-webkit-transform: rotate(20deg) translateX(-25px);
transform: rotate(20deg) translateX(-25px);
} 45%,
65% {
-webkit-transform: rotate(-20deg) translateX(25px);
transform: rotate(-20deg) translateX(25px);
} 75%,
100% {
-webkit-transform: rotate(0deg) translateX(0);
transform: rotate(0deg) translateX(0);
}
} @keyframes wow-face { 15%,
25% {
-webkit-transform: rotate(20deg) translateX(-25px);
transform: rotate(20deg) translateX(-25px);
} 45%,
65% {
-webkit-transform: rotate(-20deg) translateX(25px);
transform: rotate(-20deg) translateX(25px);
} 75%,
100% {
-webkit-transform: rotate(0deg) translateX(0);
transform: rotate(0deg) translateX(0);
}
} @-webkit-keyframes wow-brow { 15%,
65% {
top: 25px;
} 75%,
100%,
0% {
top: 15px;
}
} @keyframes wow-brow { 15%,
65% {
top: 25px;
} 75%,
100%,
0% {
top: 15px;
}
} @-webkit-keyframes wow-mouth { 10%,
30% {
width: 20px;
height: 20px;
left: calc(50% - 10px);
} 50%,
70% {
width: 30px;
height: 40px;
left: calc(50% - 15px);
} 75%,
100% {
height: 50px;
}
} @keyframes wow-mouth { 10%,
30% {
width: 20px;
height: 20px;
left: calc(50% - 10px);
} 50%,
70% {
width: 30px;
height: 40px;
left: calc(50% - 15px);
} 75%,
100% {
height: 50px;
}
} @-webkit-keyframes sad-face { 25%,
35% {
top: -15px;
} 55%,
95% {
top: 10px;
} 100%,
0% {
top: 0;
}
} @keyframes sad-face { 25%,
35% {
top: -15px;
} 55%,
95% {
top: 10px;
} 100%,
0% {
top: 0;
}
} @-webkit-keyframes sad-mouth { 25%,
35% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
top: 70px;
} 55%,
100%,
0% {
-webkit-transform: scale(1);
transform: scale(1);
top: 80px;
}
} @keyframes sad-mouth { 25%,
35% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
top: 70px;
} 55%,
100%,
0% {
-webkit-transform: scale(1);
transform: scale(1);
top: 80px;
}
} @-webkit-keyframes tear-drop { 0%,
100% {
display: block;
left: 35px;
top: 15px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
} 25% {
display: block;
left: 35px;
-webkit-transform: rotate(45deg) scale(2);
transform: rotate(45deg) scale(2);
} 49.9% {
display: block;
left: 35px;
top: 65px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
} 50% {
display: block;
left: -35px;
top: 15px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
} 75% {
display: block;
left: -35px;
-webkit-transform: rotate(45deg) scale(2);
transform: rotate(45deg) scale(2);
} 99.9% {
display: block;
left: -35px;
top: 65px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
} @keyframes tear-drop { 0%,
100% {
display: block;
left: 35px;
top: 15px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
} 25% {
display: block;
left: 35px;
-webkit-transform: rotate(45deg) scale(2);
transform: rotate(45deg) scale(2);
} 49.9% {
display: block;
left: 35px;
top: 65px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
} 50% {
display: block;
left: -35px;
top: 15px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
} 75% {
display: block;
left: -35px;
-webkit-transform: rotate(45deg) scale(2);
transform: rotate(45deg) scale(2);
} 99.9% {
display: block;
left: -35px;
top: 65px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
} @-webkit-keyframes hands-up {
25% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
} 50% {
-webkit-transform: rotate(-15deg) translateY(-10px);
transform: rotate(-15deg) translateY(-10px);
} 75%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
} @keyframes hands-up {
25% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
} 50% {
-webkit-transform: rotate(-15deg) translateY(-10px);
transform: rotate(-15deg) translateY(-10px);
} 75%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
} @-webkit-keyframes thumbs-up {
25% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
} 50%,
100% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
} @keyframes thumbs-up {
25% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
} 50%,
100% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
} @-webkit-keyframes angry-color { 45%,
60% {
background-size: 250%;
} 85%,
100%,
0% {
background-size: 100%;
}
} @keyframes angry-color { 45%,
60% {
background-size: 250%;
} 85%,
100%,
0% {
background-size: 100%;
}
} @-webkit-keyframes angry-face { 35%,
60% {
-webkit-transform: translateX(0) translateY(10px) scale(0.9);
transform: translateX(0) translateY(10px) scale(0.9);
} 40% {
-webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
transform: translateX(-5px) translateY(10px) scale(0.9);
} 45% {
-webkit-transform: translateX(5px) translateY(10px) scale(0.9);
transform: translateX(5px) translateY(10px) scale(0.9);
} 50% {
-webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
transform: translateX(-5px) translateY(10px) scale(0.9);
} 55% {
-webkit-transform: translateX(5px) translateY(10px) scale(0.9);
transform: translateX(5px) translateY(10px) scale(0.9);
}
} @keyframes angry-face { 35%,
60% {
-webkit-transform: translateX(0) translateY(10px) scale(0.9);
transform: translateX(0) translateY(10px) scale(0.9);
} 40% {
-webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
transform: translateX(-5px) translateY(10px) scale(0.9);
} 45% {
-webkit-transform: translateX(5px) translateY(10px) scale(0.9);
transform: translateX(5px) translateY(10px) scale(0.9);
} 50% {
-webkit-transform: translateX(-5px) translateY(10px) scale(0.9);
transform: translateX(-5px) translateY(10px) scale(0.9);
} 55% {
-webkit-transform: translateX(5px) translateY(10px) scale(0.9);
transform: translateX(5px) translateY(10px) scale(0.9);
}
} @-webkit-keyframes angry-mouth { 25%,
50% {
height: 6px;
bottom: 25px;
}
} @keyframes angry-mouth { 25%,
50% {
height: 6px;
bottom: 25px;
}
}
</style>
</head> <body>
<mark>(顶赞)</mark>
<div class="emoji emoji--like">
<div class="emoji__hand">
<div class="emoji__thumb"></div>
</div>
</div>
<mark>(喜欢)</mark>
<div class="emoji emoji--love">
<div class="emoji__heart"></div>
</div>
<mark>(哈哈)</mark>
<div class="emoji emoji--haha">
<div class="emoji__face">
<div class="emoji__eyes"></div>
<div class="emoji__mouth">
<div class="emoji__tongue"></div>
</div>
</div>
</div>
<mark>(微笑)</mark>
<div class="emoji emoji--yay">
<div class="emoji__face">
<div class="emoji__eyebrows"></div>
<div class="emoji__mouth"></div>
</div>
</div>
<mark>(吃惊)</mark>
<div class="emoji emoji--wow">
<div class="emoji__face">
<div class="emoji__eyebrows"></div>
<div class="emoji__eyes"></div>
<div class="emoji__mouth"></div>
</div>
</div>
<mark>(哭泣)</mark>
<div class="emoji emoji--sad">
<div class="emoji__face">
<div class="emoji__eyebrows"></div>
<div class="emoji__eyes"></div>
<div class="emoji__mouth"></div>
</div>
</div>
<mark>(发怒)</mark>
<div class="emoji emoji--angry">
<div class="emoji__face">
<div class="emoji__eyebrows"></div>
<div class="emoji__eyes"></div>
<div class="emoji__mouth"></div>
</div>
</div>
</body> </html>
css 画的动画表情的更多相关文章
- 画线动画——SVG版和纯CSS版
概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...
- 用CSS画小猪佩奇，你就是下一个社会人！ js将“I am a coder”反转成 “coder a am I”，不许用split，join，subString，reverse；求解方法三
用CSS画小猪佩奇,你就是下一个社会人! 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...
- 周末愉快--css画大熊猫
周末找了点轻松的话题,css画大熊猫. 先上效果图 欢迎竞猜大熊猫到底说了什么?? 再上源码 <!DOCTYPE html> <html lang="en"> ...
- 一步一步教你用CSS画爱心
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
随机推荐
- vs下给生成的程序（exe）加入默认的申请管理员权限
在vs下编程时,经常会用到一些特殊的权限,尤其是管理员权限,下面是在win7下笔者亲测通过的. 下面要分两种情况: 第一种情况就是在vs2003或者以下的编译器中运行 1.准备一个manifest文件 ...
- sloop公共程序之总体描述
1:功能需求 开发一个公共库文件sloop.c,实现三个常用功能以供其它模块调用.三个功能如下: 功能一:实现一般的信号监听,调用模块只需传入要监听的信号和相应的回调函数就可以在信号到时调用回调函数处 ...
- \G,sql中select 如果太长,可以在后面放\G，竖行显示~~~~
1.使用\G按行垂直显示结果 如果一行很长,需要这行显示的话,看起结果来就非常的难受. 在SQL语句或者命令后使用\G而不是分号结尾,可以将每一行的值垂直输出. mysql> select * ...
- Kubernetes 1.5通过Ceph实现有状态容器
在上一篇博文,我们通过kubernetes的devlopment和service完成了sonarqube的部署.看起来已经可用,但是仍然有一个很大的问题.我们知道,像mysql这种数据库是需要保存数据 ...
- js返回上一页的实现方法
下面是常用代码: <a href="<a href="javascript :history.back(-1)">返回上一页</a> < ...
- （转）JAVA 十六个常用工具类
一. org.apache.commons.io.IOUtils closeQuietly 关闭一个IO流.socket.或者selector且不抛出异常.通常放在finally块 toString ...
- 子序列 sub sequence问题，例：最长公共子序列，[LeetCode] Distinct Subsequences(求子序列个数)
引言 子序列和子字符串或者连续子集的不同之处在于,子序列不需要是原序列上连续的值. 对于子序列的题目,大多数需要用到DP的思想,因此,状态转移是关键. 这里摘录两个常见子序列问题及其解法. 例题1, ...
- Lucene 查询分页技术
常用的Lucene查询代码如下所示,该代码的作用是将path路径下的所有索引信息返回 public String matchAll(String path) { try { Directory dir ...
- Win10环境下配置VScode的C++编译环境
写前感想:前前后后,折腾好几次,最后还是在学长安利下,开始入坑vscode了.原因一个是小巧,还有就是vs新建工程码题的方式太消耗内存了,基本每个项目就是以MB为单位计算的,然后希望用这篇文章记录自己 ...
- 朋友封装的一个ASP.NET上传文件的方法
朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...