纯CSS表情符号

下载代码

html

css

分享到微信朋友圈

html

css

/*------ Main Emoji Styling ------*/

body {
  background: #f7f8f9;
}

.container {
  width: 100%;
  padding: 50px 0;
}

.wrapper {
  max-width: 482px;
  margin: 0 auto;
  overflow: auto;
  zoom: 1;
}

.emoji {
  box-sizing: border-box;
  float: left;
}

.face {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 15px 30px 0;
  border-radius: 50%;
  background: #F2DD68;
}

.face:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -8px;
  left: -8px;
  border-radius: 50%;
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.07);
}

.eye {
  position: absolute;
  width: 11px;
  height: 11px;
  top: 32px;
  left: 16px;
  z-index: 1;
  border-radius: 50%;
  background: #995710;
}

.eye:last-child {
  left: auto;
  right: 16px;
}

.emoji:hover .eye {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

@keyframes blink {
  10% {
    height: 11px;
    top: 32px;
  }
  30% {
    height: 1px;
    top: 37px;
  }
  50% {
    height: 11px;
    top: 32px;
  }
}

.mouth {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 1;
  width: 70px;
  height: 34px;
  margin: 0 auto;
  border-radius: 0 0 70px 70px;
  overflow: hidden;
  background: #995710;
}

.mouth:before,
.mouth:after {
  content: '';
  position: absolute;
  display: block;
}

.mouth.teath:before {
  width: 100%;
  height: 10px;
  z-index: 2;
  background: #fffae6;
}

.mouth.tounge:after {
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  right: 0;
  top: 15px;
  margin: 0 auto;
  border-radius: 50%;
  background: #d8aa2b;
}

/*------ Grin Emoji Styling ------*/

.grin .eye {
  transition: all 0.3s ease-in-out;
}

.grin:hover .eye {
  animation: none;
  height: 2px;
  top: 36px;
}

.grin:hover .mouth {
  animation-name: giggle;
  animation-iteration-count: infinite;
  animation-duration: 0.2s;
}

@keyframes giggle {
  0% {
    transform: translate(0, -1px);
  }
  50% {
    transform: translate(0, 2px);
  }
  100% {
    transform: translate(0, -1px);
  }
}

/*------ Sad Emoji Styling ------*/

.sad .mouth {
  top: 44px;
  border-radius: 70px 70px 0 0;
}

.sad .mouth:before {
  display: none;
}

/*------ Shocked Emoji Styling ------*/

.shocked .mouth {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.shocked .eye {
  transition: all 0.2s ease-in-out;
}

.shocked:hover .eye {
  animation: none;
  transform: scale(1.3, 1.3);
  transition: all 1.5s ease-out;
}

.shocked:hover .mouth {
  animation-name: wow;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
}

@keyframes wow {
  70% {
    transform: scale(0.5, 0.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

/*------ Smiling Emoji Styling ------*/

.smile .mouth {
  width: 50px;
  height: 25px;
  background: transparent;
  border-radius: 0 0 50px 50px;
  border: 4px solid #995710;
  border-top: 0;
  -webkit-clip-path: inset(30% 0 0 0);
  clip-path: inset(30% 0 0 0);
}

/*------ Speechless Emoji Styling ------*/

.speechless .mouth {
  width: 70px;
  height: 4px;
  top: 60px;
  border-radius: 0;
}

/*------ Love Emoji Styling ------*/

.heart-eye {
  position: absolute;
  top: 30px;
  left: 16px;
  transform: rotate(-15deg);
}

.heart-eye:last-child {
  left: auto;
  right: 16px;
  transform: rotate(15deg);
}

.heart {
  display: block;
  width: 16px;
  height: 16px;
  background: #e25d5d;
  transform: rotate(-45deg);
}

.heart:before,
.heart:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e25d5d;
}

.heart:before {
  top: -8px;
  left: 0;
}

.heart:after {
  left: 8px;
  top: 0;
}

.love .mouth {
  transform: scale(0.5, 0.5);
}

.love:hover .heart-eye {
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.love:hover .heart-eye:last-child {
  animation-name: pulse-right;
}

@keyframes pulse {
  30% {
    transform: scale(1.1, 1.1) rotate(-15deg);
  }
  70% {
    transform: scale(1, 1) rotate(-15deg);
  }
}

@keyframes pulse-right {
  30% {
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  70% {
    transform: scale(1, 1) rotate(15deg);
  }
}

/*------ Angry Emoji Styling ------*/

.angry .face {
  background: #e25d5d;
  transition: all 500ms ease-in-out;
}

.angry:hover .face {
  background: #e84747;
  animation-name: fuming;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes fuming {
  10% {
    transform: translate(-5px);
  }
  15% {
    transform: translate(5px);
  }
  20% {
    transform: translate(-5px);
  }
  25% {
    transform: translate(5px);
  }
  30% {
    transform: translate(-5px);
  }
  35% {
    transform: translate(5px);
  }
  40% {
    transform: translate(-5px);
  }
  45% {
    transform: translate(5px);
  }
  50% {
    transform: translate(0);
  }
}

.angry .eye,
.angry .eye:before,
.angry .mouth {
  background: #7f2626;
}

.angry .eye:before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 5px;
  top: -1px;
  left: -4px;
  transform: rotate(20deg);
}

.angry .eye:last-child:before {
  left: auto;
  right: -4px;
  transform: rotate(-20deg);
}

.angry .mouth {
  width: 20px;
  height: 4px;
  top: 64px;
  border-radius: 0;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg