一款基于jquery和css3的头像恶搞特效-白红宇

一款基于jquery和css3的头像恶搞特效

阅读量：6840 次

发布时间：2019-06-26

本文共 3486 字，大约阅读时间需要 11 分钟。

今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。效果图如下：

实现的代码。

html代码：

css3代码：

.wwiaftm-container {
     position: relative;  width: 200px;  height: 275px;  margin: auto;  padding-top: 100px;}.profile {
     border-radius: 100px;  overflow: hidden;}.wwiaftm {
     background: #48e0a4;  position: absolute;  margin: auto;  border-radius: 25%;}.body-1 {
     background-repeat: no-repeat;  background-position: center;  background-size: 70%;}.base {
     width: 60px;  height: 80px;  bottom: 0;  left: 0;  right: 0;}.hat {
     top: -120px;  height: 80px;  width: 100px;  -webkit-transform-origin: 50% 100%;  transform-origin: 50% 100%;  -webkit-transform: rotate3d(0,0,1,0deg);  transform: rotate3d(0,0,1,0deg);  background-repeat: no-repeat;  background-position: center;  background-color: transparent;  background-size: 100%;  z-index: 10 !important;}.body-1, .body-2, .head {
     top: -60px;  height: 80px;  width: 60px;  -webkit-transform-origin: 50% 100%;  transform-origin: 50% 100%;  -webkit-transform: rotate3d(0,0,1,0deg);  transform: rotate3d(0,0,1,0deg);}.body-1 {
     -webkit-animation: flail 4s linear infinite;  animation: flail 4s linear infinite;}.body-2 {
     -webkit-animation: flail 3s linear infinite;  animation: flail 3s linear infinite;}.head, .hat {
     -webkit-animation: flail 2s linear infinite;  animation: flail 2s linear infinite;  z-index: 1;}.head .eye, .head .mouth {
     height: 20%;  width: 15%;  background: black;  position: absolute;  top: 25%;}.head .eye.right {
     right: 20%;}.head .eye.left {
     left: 20%;}.head .mouth {
     width: 70%;  top: 60%;  height: 5%;  left: 0;  right: 0;  margin: auto;}.arm-1, .arm-2 {
     position: absolute;  width: 50px;  height: 20px;  right: 90%;  top: 25%;  -webkit-animation: flail 1s linear infinite;  animation: flail 1s linear infinite;  -webkit-transform-origin: 100% 50%;  transform-origin: 100% 50%;}.arm-1.right, .arm-2.right {
     left: 90%;  -webkit-transform-origin: 0% 50%;  transform-origin: 0% 50%;}.arm-1 .arm-2 {
     -webkit-animation: flail .5s linear infinite;  animation: flail .5s linear infinite;  right: 80%;  top: auto;}.arm-1 .arm-2.right {
     left: 80%;  right: auto;}@-webkit-keyframes flail {
     0% {    -webkit-transform: rotate3d(0,0,1,0deg);  }  25% {
       -webkit-transform: rotate3d(0,0,1,50deg);  }  50% {
       -webkit-transform: rotate3d(0,0,1,0deg);  }  75% {
       -webkit-transform: rotate3d(0,0,1,-50deg);  }  100% {
       -webkit-transform: rotate3d(0,0,1,0deg);  }}@keyframes flail {
     0% {    transform: rotate3d(0,0,1,0deg);  }  25% {
       transform: rotate3d(0,0,1,50deg);  }  50% {
       transform: rotate3d(0,0,1,0deg);  }  75% {
       transform: rotate3d(0,0,1,-50deg);  }  100% {
       transform: rotate3d(0,0,1,0deg);  }}.switch-container {
     text-align: center;  margin-top: 25px;}#hat-switch {
     text-align: center;  font-size: 24px;  cursor: pointer;}