今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子。如下图照片中头像左右摇晃,很搞笑,大家也可以自己尝试制作哦。
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板- <div class="wwiaftm-container">
- <div class="base wwiaftm">
- <div class="body-1 wwiaftm">
- <div class="body-2 wwiaftm">
- <div class="hat wwiaftm" style="background-image: url(Mini_Sombrero.png)">
- </div>
- <div class="head wwiaftm">
- <div class="profile">
- <img src="head.png">
- </div>
- </div>
- <div class="wwiaftm arm-1 left">
- <div class="wwiaftm arm-2 left">
- <div class="wwiaftm fingers">
- </div>
- </div>
- </div>
- <div class="wwiaftm arm-1 right">
- <div class="wwiaftm arm-2 right">
- <div class="wwiaftm fingers">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="switch-container">
- <button id="hat-switch">
- Hat Me!</button>
- </div>
- <script src='jquery.min.js'></script>
- <script> var hats = Array(
- 'Mini_Sombrero.png', 'med.png',
- 'svg.med.png',
- 'cartoon-cowboy-8.gif',
- '1313955-witch-hat-002_92007.gif',
- '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
- </script>
css3代码:
CSS Code复制内容到剪贴板- .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(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.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% 50%;
- }
- .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(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;
- }
标签:
css3,jquery,恶搞头像
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“一款恶搞头像特效的制作过程 利用css3和jquery”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
20240901
20240901
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】