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" " ...
随机推荐
- C++构造函数和析构函数顺序
构造函数 先看看构造函数的调用顺序规则,只要我们在平时编程的时候遵守这种约定,任何关于构造函数的调用问题都能解决:构造函数的调用顺序总是如下:1.基类构造函数.如果有多个基类,则构造函数的调用顺 ...
- OpenCV---模板匹配matchTemplate
作用有局限性,必须在指定的环境下,才能匹配成功,是受到很多因素的影响,所以有一定的适应性 模板匹配是一种最原始.最基本的模式识别方法,研究某一特定对象物的图案位于图像的什么地方,进而识别对象物,这就是 ...
- Spring整合JMS(一)——基于ActiveMQ实现 （转）
*注:别人那复制来的 1.1 JMS简介 JMS的全称是Java Message Service,即Java消 息服务.它主要用于在生产者和消费者之间进行消息传递,生产者负责产生消息,而消费者 ...
- webpack4.0.1安装问题及解决方法
2月底的时候,webpack4正式发布了,但是当我们安装之后,使用下面的语句来打包的时候,发现打包失败了 webpack ./src/main.js ./dist/bundle.js 并且给出了下面这 ...
- macbook 安装任意来源
sudo spctl --master-disable Comand+r Csrutil disable Reboot
- 51nod 1140 矩阵相乘结果的判断
给出三个N*N的矩阵A, B, C,问A * B是否等于C? Input 第1行,1个数N.(0 <= N <= 500) 第2 - N + 1行:每行N个数,对应矩阵A的元素.(0 ...
- 【CodeForces】870 F. Paths
[题目]F. Paths [题意]给定数字n,图上有编号为1~n的点,两点当且仅当gcd(u,v)≠1时有连边,定义d(u,v)为两点间最短距离(若不连通则为0),求Σd(u,v),1<=u&l ...
- 【洛谷P1104】生日
题目描述 cjf君想调查学校OI组每个同学的生日,并按照从大到小的顺序排序.但cjf君最近作业很多,没有时间,所以请你帮她排序. 输入输出格式 输入格式: 有2行,第1行为OI组总人数n:第2行至第n ...
- 面试整理（1）：原生ajax
接到电话面试,有一些送分题答的不好,在这里整理一下 问题:原生ajax的工作流程是怎么样的? 老用封装好的工具,原生的ajax其实并不熟悉,今天复习一下.主要参考http://www.w3school ...
- 【leetcode 简单】第十四题 最后一个单词的长度
给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...