svg三维动态表情效果-html代码-BFW代码库

svg三维动态表情效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.feedback {
  --normal: #ECEAF3;
  --normal-shadow: #D9D8E3;
  --normal-mouth: #9795A4;
  --normal-eye: #595861;
  --active: #F8DA69;
  --active-shadow: #F4B555;
  --active-mouth: #F05136;
  --active-eye: #313036;
  --active-tear: #76b5e7;
  --active-shadow-angry: #e94f1d;
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: flex;
}
.feedback li {
  position: relative;
  border-radius: 50%;
  background: var(--sb, var(--normal));
  box-shadow: inset 3px -3px 4px var(--sh, var(--normal-shadow));
  -webkit-transition: background .4s, box-shadow .4s, -webkit-transform .3s;
  transition: background .4s, box-shadow .4s, -webkit-transform .3s;
  transition: background .4s, box-shadow .4s, transform .3s;
  transition: background .4s, box-shadow .4s, transform .3s, -webkit-transform .3s;
  -webkit-tap-highlight-color: transparent;
}
.feedback li:not(:last-child) {
  margin-right: 20px;
}
.feedback li div {
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: perspective(240px) translateZ(4px);
          transform: perspective(240px) translateZ(4px);
}
.feedback li div svg, .feedback li div:before, .feedback li div:after {
  display: block;
  position: absolute;
.........完整代码请登录后点击上方下载按钮下载查看