Shulou(Shulou.com)06/03 Report--

How to use css3 and jquery to make a parody profile portrait special effects, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

In this example, an avatar dances in the picture, and the avatar has a lovely hat. Click the button below to switch different hats for the avatar.

As shown in the following picture

The code for the implementation.

Html Code:

XML/HTML Code copies content to the clipboard

Hat Me! Var hats = Array ('Mini_Sombrero.png',' med.png', 'svg.med.png',' cartoon-cowboy-8.gif', '1313955 MuwitchMuhhatLave002 / 92007.giftings,' hat_mario_101401.jpg', 'vector-hat-design1.jpg') $('# hat-switch') .on ('click', function (e) {e.preventDefault (); var hat = hats [Math.floor (Math.random () * hats.length)]; $(' .hat') .css ('background-image',' url ('+ hat +');}) / / @ sourceURL=pen.js css3 code: CSS Code copies content to the clipboard. 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; bottombottom: 0; left: 0; rightright: 0;} .hat {top:-120px; height: 80px; width: 100px;-webkit-transform-origin: 50% 100%; transform-origin: 50% 100% -webkit-transform: rotate3d; transform: rotate3d; 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% Transform-origin: 50% 100%;-webkit-transform: rotate3d; transform: rotate3d;} .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.rightright {rightright: 20%;} .head .eye.left {left: 20%;} .head .mouth {width: 70%; top: 60% Height: 5%; left: 0; rightright: 0; margin: auto;} .arm-1, .arm-2 {position: absolute; width: 50px; height: 20px; rightright: 90%; top: 25%;-webkit-animation: flail 1s linear infinite; animation: flail 1s linear infinite;-webkit-transform-origin: 100% 50%; transform-origin: 100% } .arm-1.rightright, .arm-2.rightright {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; rightright: 80%; top: auto;} .arm-1. Arm-2.rightright {left: 80% Rightright: auto;} @-webkit-keyframes flail {0% {- webkit-transform: rotate3d;} 25% {- webkit-transform: rotate3d;} 50% {- webkit-transform: rotate3d;} 75% {- webkit-transform: rotate3d } 100% {- webkit-transform: rotate3d;} @ keyframes flail {0% {transform: rotate3d;} 25% {transform: rotate3d);} 50% {transform: rotate3d;} 75% {transform: rotate3d } 100% {transform: rotate3d;}}. Switch-container {text-align: center; margin-top: 25px;} # hat-switch {text-align: center; font-size: 24px; cursor: pointer;} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.