在里面主要用的了CSS中的几个属性:position—定位;border-radius—圆角;box-shadow—阴 影;background(linear-gradient)—渐变;transform—旋转和变换;animation —动画,技术点不是很多,主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性,代码比较多。
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
- <title>纯CSS漫画</title>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- .outer-circle {
- position: absolute;
- top: 32px;
- left: 44px;
- width: 289px;
- height: 289px;
- border: 4px solid #75BD4F;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- }
- .inner-circle {
- position: relative;
- width: 269px;
- height: 269px;
- border: 10px solid #F5F910;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- background-color: #73BF43;
- }
- .inner-circle div {
- position: absolute;
- }
- .inner-circle-light {
- top: 41px;
- left: 35px;
- -moz-box-shadow: 26px 26px 29px 37px #fff;
- -webkit-box-shadow: 26px 26px 29px 37px #fff;
- box-shadow: 26px 26px 29px 37px #fff;
- }
- .header-top {
- top: 11px;
- rightright: 2px;
- z-index: 100;
- width: 180px;
- height: 90px;
- -moz-border-radius: 90px 90px 0 0;
- -webkit-border-radius: 90px 90px 0 0;
- border-radius: 90px 90px 0 0;
- background-color: #000;
- -moz-transform: rotate(32deg);
- -ms-transform: rotate(32deg);
- -o-transform: rotate(32deg);
- -webkit-transform: rotate(32deg);
- transform: rotate(32deg);
- }
- .header-left {
- top: -20px;
- left: 37px;
- width: 114px;
- height: 228px;
- -moz-border-radius: 228px 0 0 228px;
- -webkit-border-radius: 228px 0 0 228px;
- border-radius: 228px 0 0 228px;
- background-color: #000;
- -moz-transform: rotate(26deg);
- -ms-transform: rotate(26deg);
- -o-transform: rotate(26deg);
- -webkit-transform: rotate(26deg);
- transform: rotate(26deg);
- }
- .hair-left-1 {
- top: 15px;
- left: 53px;
- z-index: 55;
- width: 85px;
- height: 23px;
- -webkit-border-top-left-radius: 30px 180px;
- border-top-left-radius: 30px 180px;
- -webkit-border-bottom-left-radius: 30px 80px;
- border-bottom-left-radius: 30px 80px;
- background-color: #000;
- -moz-transform: rotate(-74deg) skew(-42deg, 23deg);
- -ms-transform: rotate(-74deg) skew(-42deg, 23deg);
- -o-transform: rotate(-74deg) skew(-42deg, 23deg);
- -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);
- transform: rotate(-74deg) skew(-42deg, 23deg);
- }
- .hair-left-2 {
- top: -20px;
- left: 99px;
- z-index: 60;
- width: 49px;
- height: 37px;
- background-color: #000;
- -moz-transform: rotate(-51deg) skew(-43deg, 0deg);
- -ms-transform: rotate(-51deg) skew(-43deg, 0deg);
- -o-transform: rotate(-51deg) skew(-43deg, 0deg);
- -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);
- transform: rotate(-51deg) skew(-43deg, 0deg);
- }
- .hair-rightright-1 {
- top: 70px;
- rightright: 1px;
- z-index: 60;
- width: 81px;
- height: 85px;
- -webkit-border-top-rightright-radius: 26px 120px;
- border-top-rightright-radius: 26px 120px;
- background-color: black;
- -moz-transform: rotate(1deg) skew(-51deg, 0deg);
- -ms-transform: rotate(1deg) skew(-51deg, 0deg);
- -o-transform: rotate(1deg) skew(-51deg, 0deg);
- -webkit-transform: rotate(1deg) skew(-51deg, 0deg);
- transform: rotate(1deg) skew(-51deg, 0deg);
- }
- .hair-rightright-2 {
- width: 60px;
- height: 10px;
- -webkit-border-bottom-left-radius: 100%;
- border-bottom-left-radius: 100%;
- background-color: rgba(0,0,0,0.2);
- }
- .hair-light-1 {
- top: 30px;
- rightright: 45px;
- z-index: 105;
- width: 57px;
- height: 17px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- background-color: white;
- -moz-transform: rotate(39deg);
- -ms-transform: rotate(39deg);
- -o-transform: rotate(39deg);
- -webkit-transform: rotate(39deg);
- transform: rotate(39deg);
- }
- .hair-light-1-over {
- top: 32px;
- rightright: 38px;
- z-index: 105;
- width: 83px;
- height: 21px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- background-color: black;
- -moz-transform: rotate(41deg);
- -ms-transform: rotate(41deg);
- -o-transform: rotate(41deg);
- -webkit-transform: rotate(41deg);
- transform: rotate(41deg);
- }
- .hair-light-2 {
- top: 16px;
- rightright: 104px;
- z-index: 105;
- width: 4px;
- height: 2px;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- background-color: white;
- -moz-transform: rotate(10deg);
- -ms-transform: rotate(10deg);
- -o-transform: rotate(10deg);
- -webkit-transform: rotate(10deg);
- transform: rotate(10deg);
- }
- .ear {
- top: 141px;
- rightright: 36px;
- z-index: 110;
- width: 49px;
- height: 48px;
- border: 2px solid #000;
- border-bottom-width: 1px;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- background-color: #F6C6B0;
- -moz-box-shadow: -4px 0 0 0 #de9876 inset;
- -webkit-box-shadow: -4px 0 0 0 #de9876 inset;
- box-shadow: -4px 0 0 0 #de9876 inset;
- -moz-transform: rotate(56deg) scaleY(1.4);
- -ms-transform: rotate(56deg) scaleY(1.4);
- -o-transform: rotate(56deg) scaleY(1.4);
- -webkit-transform: rotate(56deg) scaleY(1.4);
- transform: rotate(56deg) scaleY(1.4);
- }
- .ear-inner-1 {
- top: 22px;
- left: 22px;
- z-index: 70;
- width: 9px;
- height: 5px;
- border-top: 1px solid #110b00;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- -moz-transform: rotate(-6deg);
- -ms-transform: rotate(-6deg);
- -o-transform: rotate(-6deg);
- -webkit-transform: rotate(-6deg);
- transform: rotate(-6deg);
- }
- .ear-inner-2 {
- top: 19px;
- left: 18px;
- width: 14px;
- height: 7px;
- border-top: 2px solid #110b00;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- -moz-box-shadow: 0px 2px 0 0 #de9876 inset;
- -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;
- box-shadow: 0px 2px 0 0 #de9876 inset;
- -moz-transform: rotate(-91deg);
- -ms-transform: rotate(-91deg);
- -o-transform: rotate(-91deg);
- -webkit-transform: rotate(-91deg);
- transform: rotate(-91deg);
- }
- .ear-light {
- top: 21px;
- rightright: 34px;
- z-index: 105;
- width: 17px;
- height: 6px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- background-color: #FFF;
- -moz-transform: rotate(89deg);
- -ms-transform: rotate(89deg);
- -o-transform: rotate(89deg);
- -webkit-transform: rotate(89deg);
- transform: rotate(89deg);
- }
- .ear-over {
- bottombottom: -44px;
- left: -33px;
- z-index: 55;
- width: 69px;
- height: 59px;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- background-color: #f6c6b0;
- -moz-transform: rotate(26deg);
- -ms-transform: rotate(26deg);
- -o-transform: rotate(26deg);
- -webkit-transform: rotate(26deg);
- transform: rotate(26deg);
- }
- .face-main {
- top: 30px;
- left: 35px;
- z-index: 50;
- width: 180px;
- height: 188px;
- -moz-border-radius: 90px;
- -webkit-border-radius: 90px;
- border-radius: 90px;
- background-color: #F6C6B0;
- -moz-box-shadow: 3px -3px 0 0 #fff inset;
- -webkit-box-shadow: 3px -3px 0 0 #fff inset;
- box-shadow: 3px -3px 0 0 #fff inset;
- }
- .face-top {
- top: 61px;
- rightright: 75px;
- z-index: 105;
- width: 111px;
- height: 46px;
- -moz-border-radius: 50% 50% 26px 0;
- -webkit-border-radius: 50% 50% 26px 0;
- border-radius: 50% 50% 26px 0;
- background-color: #f6c6b0;
- -moz-transform: rotate(37deg);
- -ms-transform: rotate(37deg);
- -o-transform: rotate(37deg);
- -webkit-transform: rotate(37deg);
- transform: rotate(37deg);
- }
- .face-rightright-1 {
- top: 115px;
- rightright: 71px;
- z-index: 105;
- width: 68px;
- height: 62px;
- -moz-border-radius: 100% 0 0;
- -webkit-border-radius: 100% 0 0;
- border-radius: 100% 0 0;
- background-color: #f6c6b0;
- -moz-transform: rotate(99deg);
- -ms-transform: rotate(99deg);
- -o-transform: rotate(99deg);
- -webkit-transform: rotate(99deg);
- transform: rotate(99deg);
- }
- .face-bottombottom-1 {
- bottombottom: 42px;
- left: 45px;
- z-index: 40;
- width: 72px;
- height: 52px;
- -webkit-border-bottom-left-radius: 70px 40px;
- -webkit-border-top-left-radius: 14px 11px;
- border-top-left-radius: 14px 11px;
- border-bottom-left-radius: 70px 40px;
- background-color: #000;
- }
- .face-bottombottom-1-over {
- bottombottom: 45px;
- left: 48px;
- z-index: 55;
- width: 69px;
- height: 47px;
- -webkit-border-bottom-left-radius: 70px 40px;
- -webkit-border-top-left-radius: 14px 11px;
- border-top-left-radius: 14px 11px;
- border-bottom-left-radius: 70px 40px;
- background-color: #f6c6b0;
- -moz-box-shadow: 3px 0px 0 0 #fff inset;
- -webkit-box-shadow: 3px 0px 0 0 #fff inset;
- box-shadow: 3px 0px 0 0 #fff inset;
- }
- .face-bottombottom-2 {
- rightright: 97px;
- bottombottom: 44px;
- z-index: 55;
- width: 43px;
- height: 31px;
- -webkit-border-bottom-rightright-radius: 70px 40px;
- border-bottom-rightright-radius: 70px 40px;
- background-color: #000;
- -moz-transform: rotate(-4deg) skew(-49deg, 0deg);
- -ms-transform: rotate(-4deg) skew(-49deg, 0deg);
- -o-transform: rotate(-4deg) skew(-49deg, 0deg);
- -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);
- transform: rotate(-4deg) skew(-49deg, 0deg);
- }
- .face-bottombottom-2-over {
- rightright: 99px;
- bottombottom: 46px;
- z-index: 56;
- width: 43px;
- height: 31px;
- -webkit-border-bottom-rightright-radius: 70px 40px;
- border-bottom-rightright-radius: 70px 40px;
- background-color: #f6c6b0;
- -moz-box-shadow: -6px 2px 0 0 #de9876 inset;
- -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;
- box-shadow: -6px 2px 0 0 #de9876 inset;
- -moz-transform: rotate(-3deg) skew(-49deg, 0deg);
- -ms-transform: rotate(-3deg) skew(-49deg, 0deg);
- -o-transform: rotate(-3deg) skew(-49deg, 0deg);
- -webkit-transform: rotate(-3deg) skew(-49deg, 0deg);
- transform: rotate(-3deg) skew(-49deg, 0deg);
- }
- .face-light-1 {
- rightright: 127px;
- bottombottom: 95px;
- z-index: 150;
- width: 6px;
- height: 6px;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- background-color: #fff;
- }
- .face-light-2 {
- bottombottom: 82px;
- left: 58px;
- z-index: 150;
- width: 4px;
- height: 4px;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- background-color: #fff;
- }
- .chin {
- bottombottom: 39px;
- left: 111px;
- z-index: 70;
- width: 11px;
- height: 12px;
- border: 2px solid #000;
- border-top-color: #f6c6b0;
- border-left-color: #f6c6b0;
- -webkit-border-bottom-rightright-radius: 6px;
- border-bottom-rightright-radius: 6px;
- background-color: #f6c6b0;
- -moz-transform: rotate(34deg) skew(-9deg, 0deg);
- -ms-transform: rotate(34deg) skew(-9deg, 0deg);
- -o-transform: rotate(34deg) skew(-9deg, 0deg);
- -webkit-transform: rotate(34deg) skew(-9deg, 0deg);
- transform: rotate(34deg) skew(-9deg, 0deg);
- }
- .eye-rightright {
- top: 97px;
- left: 103px;
- z-index: 110;
- width: 39px;
- height: 67px;
- border: 1px solid #000;
- border-top-width: 2px;
- -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
- -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
- border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
- background-color: #F8FAF7;
- -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
- -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
- box-shadow: 0px 5px 0 0 #d5d9e2 inset;
- }
- .eye-rightright-inner {
- rightright: 0;
- bottombottom: 3px;
- z-index: 115;
- width: 30px;
- height: 52px;
- -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
- -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
- border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
- background-color: #000;
- }
- .eye-rightright-light1 {
- top: 19px;
- rightright: 0;
- z-index: 120;
- width: 19px;
- height: 10px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- background-color: #FFF;
- -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;
- -o-animation: eye-flash 0.2s linear 0.1s infinite normal;
- -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;
- -moz-transform: rotate(41deg);
- -ms-transform: rotate(41deg);
- -o-transform: rotate(41deg);
- -webkit-transform: rotate(41deg);
- transform: rotate(41deg);
- animation: eye-flash 0.2s linear 0.1s infinite normal;
- }
- @-webkit-keyframes eye-flash {
- 0% {
- top: 19px;
- }
- 100% {
- top: 21px;
- }
- }
- @-moz-keyframes eye-flash {
- 0% {
- top: 19px;
- }
- 100% {
- top: 20px;
- }
- }
- @-ms-keyframes eye-flash {
- 0% {
- top: 19px;
- }
- 100% {
- top: 20px;
- }
- }
- @keyframes eye-flash {
- 0% {
- top: 19px;
- }
- 100% {
- top: 20px;
- }
- }
- .eye-rightright-light2 {
- bottombottom: 8px;
- left: 9px;
- z-index: 120;
- width: 14px;
- height: 7px;
- -webkit-border-bottom-rightright-radius: 100%;
- border-bottom-rightright-radius: 100%;
- background-color: #FFF;
- -moz-transform: rotate(-39deg);
- -ms-transform: rotate(-39deg);
- -o-transform: rotate(-39deg);
- -webkit-transform: rotate(-39deg);
- transform: rotate(-39deg);
- }
- .eye-rightright-eyelash1 {
- top: 9px;
- left: -3px;
- width: 2px;
- height: 4px;
- background-color: #000;
- -moz-transform: rotate(-54deg);
- -ms-transform: rotate(-54deg);
- -o-transform: rotate(-54deg);
- -webkit-transform: rotate(-54deg);
- transform: rotate(-54deg);
- }
- .eye-rightright-eyelash2 {
- top: 1px;
- left: 1px;
- width: 2px;
- height: 5px;
- background-color: #000;
- -moz-transform: rotate(-33deg);
- -ms-transform: rotate(-33deg);
- -o-transform: rotate(-33deg);
- -webkit-transform: rotate(-33deg);
- transform: rotate(-33deg);
- }
- .eye-rightright-eyelash3 {
- top: -8px;
- left: 8px;
- width: 2px;
- height: 7px;
- background-color: #000;
- -moz-transform: rotate(-21deg);
- -ms-transform: rotate(-21deg);
- -o-transform: rotate(-21deg);
- -webkit-transform: rotate(-21deg);
- transform: rotate(-21deg);
- }
- .eye-rightright-eyelash4 {
- top: -6px;
- left: 21px;
- width: 2px;
- height: 6px;
- background-color: #000;
- -moz-transform: rotate(11deg);
- -ms-transform: rotate(11deg);
- -o-transform: rotate(11deg);
- -webkit-transform: rotate(11deg);
- transform: rotate(11deg);
- }
- .eye-rightright-eyelash5 {
- top: 1px;
- rightright: 8px;
- width: 2px;
- height: 6px;
- background-color: #000;
- -moz-transform: rotate(14deg);
- -ms-transform: rotate(14deg);
- -o-transform: rotate(14deg);
- -webkit-transform: rotate(14deg);
- transform: rotate(14deg);
- }
- .eye-left {
- top: 114px;
- left: 45px;
- z-index: 110;
- width: 19px;
- height: 63px;
- border: 1px solid #000;
- border-top-width: 2px;
- -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
- -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
- border-radius: 29px 28px 33px / 97px 111px 40px 90px;
- background-color: #F8FAF7;
- -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
- -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
- box-shadow: 0px 6px 0 0 #d5d9e2 inset;
- -moz-transform: rotate(-9deg);
- -ms-transform: rotate(-9deg);
- -o-transform: rotate(-9deg);
- -webkit-transform: rotate(-9deg);
- transform: rotate(-9deg);
- }
- .eye-left-inner {
- rightright: 0;
- bottombottom: 1px;
- z-index: 115;
- width: 15px;
- height: 46px;
- -moz-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;
- -webkit-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;
- border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;
- background-color: #000;
- }
- .eye-left-light1 {
- top: 19px;
- rightright: 1px;
- z-index: 120;
- width: 7px;
- height: 18px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- background-color: #FFF;
- -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;
- -o-animation: eye-flash 0.2s linear 0.1s infinite normal;
- -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;
- -moz-transform: rotate(-9deg);
- -ms-transform: rotate(-9deg);
- -o-transform: rotate(-9deg);
- -webkit-transform: rotate(-9deg);
- transform: rotate(-9deg);
- animation: eye-flash 0.2s linear 0.1s infinite normal;
- }
- .eye-left-light2 {
- bottombottom: 6px;
- left: 4px;
- z-index: 120;
- width: 11px;
- height: 4px;
- -webkit-border-bottom-rightright-radius: 100%;
- border-bottom-rightright-radius: 100%;
- background-color: #FFF;
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
- .eye-left-eyelash1 {
- top: 7px;
- left: -1px;
- width: 2px;
- height: 4px;
- background-color: #000;
- -moz-transform: rotate(-49deg);
- -ms-transform: rotate(-49deg);
- -o-transform: rotate(-49deg);
- -webkit-transform: rotate(-49deg);
- transform: rotate(-49deg);
- }
- .eye-left-eyelash2 {
- top: -1px;
- left: 2px;
- width: 2px;
- height: 5px;
- background-color: #000;
- -moz-transform: rotate(-28deg);
- -ms-transform: rotate(-28deg);
- -o-transform: rotate(-28deg);
- -webkit-transform: rotate(-28deg);
- transform: rotate(-28deg);
- }
- .eye-left-eyelash3 {
- top: -6px;
- left: 7px;
- width: 2px;
- height: 5px;
- background-color: #000;
- -moz-transform: rotate(-4deg);
- -ms-transform: rotate(-4deg);
- -o-transform: rotate(-4deg);
- -webkit-transform: rotate(-4deg);
- transform: rotate(-4deg);
- }
- .eye-left-eyelash4 {
- top: -4px;
- left: 13px;
- width: 2px;
- height: 4px;
- background-color: #000;
- -moz-transform: rotate(25deg);
- -ms-transform: rotate(25deg);
- -o-transform: rotate(25deg);
- -webkit-transform: rotate(25deg);
- transform: rotate(25deg);
- }
- .eye-left-eyelash5 {
- top: 3px;
- rightright: 0;
- width: 2px;
- height: 4px;
- background-color: #000;
- -moz-transform: rotate(41deg);
- -ms-transform: rotate(41deg);
- -o-transform: rotate(41deg);
- -webkit-transform: rotate(41deg);
- transform: rotate(41deg);
- }
- .rightright-eyebrow {
- top: 68px;
- left: 92px;
- z-index: 110;
- width: 66px;
- height: 36px;
- border: 2px solid #000;
- border-width: 2px 1px 0px 1px;
- -moz-border-radius: 45px 51px 0 0;
- -webkit-border-radius: 45px 51px 0 0;
- border-radius: 45px 51px 0 0;
- background-color: transparent;
- -moz-transform: skew(-6deg, 16deg);
- -ms-transform: skew(-6deg, 16deg);
- -o-transform: skew(-6deg, 16deg);
- -webkit-transform: skew(-6deg, 16deg);
- transform: skew(-6deg, 16deg);
- }
- .rightright-eyebrow-over {
- top: 21px;
- rightright: -5px;
- z-index: 115;
- width: 13px;
- height: 20px;
- background-color: #f6c6b0;
- }
- .left-eyebrow {
- top: 89px;
- left: 36px;
- z-index: 100;
- width: 30px;
- height: 68px;
- border: 2px solid #000;
- border-width: 2px 1px 0px 1px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- background-color: transparent;
- -moz-transform: rotate(-2deg);
- -ms-transform: rotate(-2deg);
- -o-transform: rotate(-2deg);
- -webkit-transform: rotate(-2deg);
- transform: rotate(-2deg);
- }
- .left-eyebrow-over {
- top: 17px;
- rightright: -9px;
- z-index: 105;
- width: 39px;
- height: 55px;
- -moz-border-radius: 21px 12px 0 17px;
- -webkit-border-radius: 21px 12px 0 17px;
- border-radius: 21px 12px 0 17px;
- background-color: #f6c6b0;
- -moz-transform: rotate(-13deg);
- -ms-transform: rotate(-13deg);
- -o-transform: rotate(-13deg);
- -webkit-transform: rotate(-13deg);
- transform: rotate(-13deg);
- }
- .nose {
- top: 172px;
- left: 63px;
- z-index: 115;
- width: 21px;
- height: 16px;
- border: 2px solid #000;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- -moz-box-shadow: 3px 1px 0 0 #fff inset;
- -webkit-box-shadow: 3px 1px 0 0 #fff inset;
- box-shadow: 3px 1px 0 0 #fff inset;
- }
- .nose-over {
- top: -1px;
- rightright: -11px;
- z-index: 115;
- width: 19px;
- height: 14px;
- background-color: #f6c6b0;
- -moz-transform: rotate(31deg);
- -ms-transform: rotate(31deg);
- -o-transform: rotate(31deg);
- -webkit-transform: rotate(31deg);
- transform: rotate(31deg);
- }
- .nose-tip {
- top: -7px;
- left: 13px;
- width: 2px;
- height: 6px;
- background-color: #000;
- -moz-transform: rotate(14deg);
- -ms-transform: rotate(14deg);
- -o-transform: rotate(14deg);
- -webkit-transform: rotate(14deg);
- transform: rotate(14deg);
- }
- .mouth {
- bottombottom: 61px;
- left: 72px;
- z-index: 110;
- width: 46px;
- height: 47px;
- border: 2px solid #000;
- border-width: 0 1px 2px 0;
- -moz-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;
- -webkit-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;
- border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;
- background-color: #92222E;
- -moz-transform: rotate(1deg) skew(0deg, 39deg);
- -ms-transform: rotate(1deg) skew(0deg, 39deg);
- -o-transform: rotate(1deg) skew(0deg, 39deg);
- -webkit-transform: rotate(1deg) skew(0deg, 39deg);
- transform: rotate(1deg) skew(0deg, 39deg);
- }
- .mouth-over-1 {
- bottombottom: 0;
- left: -4px;
- z-index: 115;
- width: 37px;
- height: 58px;
- border-right: 1px solid #000;
- -moz-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;
- -webkit-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;
- border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;
- background-color: #f6c6b0;
- -moz-transform: rotate(38deg) skew(0deg, 6deg);
- -ms-transform: rotate(38deg) skew(0deg, 6deg);
- -o-transform: rotate(38deg) skew(0deg, 6deg);
- -webkit-transform: rotate(38deg) skew(0deg, 6deg);
- transform: rotate(38deg) skew(0deg, 6deg);
- }
- .mouth-over-2 {
- bottombottom: 38px;
- left: 30px;
- z-index: 150;
- width: 7px;
- height: 19px;
- background-color: #f6c6b0;
- -moz-transform: rotate(-233deg);
- -ms-transform: rotate(-233deg);
- -o-transform: rotate(-233deg);
- -webkit-transform: rotate(-233deg);
- transform: rotate(-233deg);
- }
- .mouth-over-3 {
- bottombottom: -9px;
- left: 11px;
- z-index: 115;
- width: 27px;
- height: 9px;
- border-top: 2px solid #000;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- background-color: #f6c6b0;
- -moz-transform: rotate(-4deg);
- -ms-transform: rotate(-4deg);
- -o-transform: rotate(-4deg);
- -webkit-transform: rotate(-4deg);
- transform: rotate(-4deg);
- }
- .mouth-over-4 {
- bottombottom: -6px;
- left: -1px;
- z-index: 150;
- width: 7px;
- height: 15px;
- background-color: #f6c6b0;
- -moz-transform: rotate(-226deg);
- -ms-transform: rotate(-226deg);
- -o-transform: rotate(-226deg);
- -webkit-transform: rotate(-226deg);
- transform: rotate(-226deg);
- }
- .mouth-tip {
- bottombottom: 39px;
- left: 41px;
- z-index: 120;
- width: 2px;
- height: 3px;
- background-color: #000;
- -moz-transform: rotate(-51deg);
- -ms-transform: rotate(-51deg);
- -o-transform: rotate(-51deg);
- -webkit-transform: rotate(-51deg);
- transform: rotate(-51deg);
- }
- .mouth-inner {
- bottombottom: 50px;
- left: 107px;
- z-index: 115;
- width: 10px;
- height: 18px;
- -moz-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;
- -webkit-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;
- border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;
- background-color: #ed675c;
- -moz-transform: rotate(6deg);
- -ms-transform: rotate(6deg);
- -o-transform: rotate(6deg);
- -webkit-transform: rotate(6deg);
- transform: rotate(6deg);
- }
- .name-lable {
- bottombottom: -9px;
- left: -8px;
- z-index: 150;
- width: 280px;
- color: #005aa9;
- text-align: center;
- font-weight: bold;
- font-style: italic;
- font-size: 50px;
- font-family: Times New Roman;
- }
- .name-lable-light {
- top: 30px;
- width: 100%;
- height: 0;
- -moz-box-shadow: 0 0 3px 3px #fff;
- -webkit-box-shadow: 0 0 3px 3px #fff;
- box-shadow: 0 0 3px 3px #fff;
- }
- @-webkit-keyframes input-flash {
- 0% {
- border-color: #ccc;
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- }
- 100% {
- border-color: rgba(82,168,236,0.8);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- }
- }
- @-moz-keyframes input-flash {
- 0% {
- border-color: #ccc;
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- }
- 100% {
- border-color: rgba(82,168,236,0.8);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- }
- }
- @-ms-keyframes input-flash {
- 0% {
- border-color: #ccc;
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- }
- 100% {
- border-color: rgba(82,168,236,0.8);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- }
- }
- @keyframes input-flash {
- 0% {
- border-color: #ccc;
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- }
- 100% {
- border-color: rgba(82,168,236,0.8);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);
- }
- }
- </style>
- </head>
- <body>
- <div style="width: 400px; height: 359px; position: relative; margin: 50px auto;">
- <div class="outer-circle">
- <!--外圆-->
- <div class="inner-circle">
- <!--内圆-->
- <div class="inner-circle-light"></div>
- <div class="header-top"></div>
- <!--头发-->
- <div class="hair-left-1"></div>
- <div class="hair-left-2"></div>
- <div class="hair-light-1"></div>
- <div class="hair-light-1-over"></div>
- <div class="hair-light-2"></div>
- <div class="hair-right-1">
- <div class="hair-right-2">
- </div>
- </div>
- <div class="header-left"></div>
- <!--脸部-->
- <div class="face-main"></div>
- <div class="face-light-1"></div>
- <div class="face-light-2"></div>
- <div class="face-top"></div>
- <div class="face-right-1"></div>
- <div class="face-bottom-1"></div>
- <div class="face-bottom-1-over"></div>
- <div class="face-bottom-2"></div>
- <div class="face-bottom-2-over"></div>
- <div class="chin"></div>
- <div class="ear">
- <!--耳朵-->
- <div class="ear-inner-1"></div>
- <div class="ear-inner-2"></div>
- <div class="ear-over"></div>
- <div class="ear-light"></div>
- </div>
- <div class="eye-left">
- <!--左眼-->
- <div class="eye-left-inner"></div>
- <div class="eye-left-light1"></div>
- <div class="eye-left-light2"></div>
- <div class="eye-left-eyelash1"></div>
- <div class="eye-left-eyelash2"></div>
- <div class="eye-left-eyelash3"></div>
- <div class="eye-left-eyelash4"></div>
- <div class="eye-left-eyelash5"></div>
- </div>
- <div class="eye-right">
- <!--右眼-->
- <div class="eye-right-inner"></div>
- <div class="eye-right-light1"></div>
- <div class="eye-right-light2"></div>
- <div class="eye-right-eyelash1"></div>
- <div class="eye-right-eyelash2"></div>
- <div class="eye-right-eyelash3"></div>
- <div class="eye-right-eyelash4"></div>
- <div class="eye-right-eyelash5"></div>
- </div>
- <div class="right-eyebrow">
- <!--右眼眉毛-->
- <div class="right-eyebrow-over"></div>
- </div>
- <div class="left-eyebrow">
- <!--左眼眉毛-->
- <div class="left-eyebrow-over"></div>
- </div>
- <div class="nose">
- <!--鼻子-->
- <div class="nose-tip"></div>
- <div class="nose-over"></div>
- </div>
- <div class="mouth">
- <!--嘴巴-->
- <div class="mouth-over-1"></div>
- <div class="mouth-over-2"></div>
- <div class="mouth-over-3"></div>
- <div class="mouth-over-4"></div>
- <div class="mouth-tip"></div>
- </div>
- <div class="mouth-inner"></div>
- <div class="name-lable">
- ASTRO BOY
- <div class="name-lable-light"></div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
使用CSS3画出一个叮当猫
如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得。但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的 人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下:
PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!热烈的笑脸
首先,先把HTML结构搭建好:
- <div class="wrapper">
- <!--叮当猫整体-->
- <div class="doraemon">
- <!--头部-->
- <div class="head">
- <!--眼睛-->
- <div class="eyes">
- <div class="eye left">
- <!--眼珠-->
- <div class="black bleft"></div>
- </div>
- <div class="eye right">
- <div class="black bright"></div>
- </div>
- </div>
- <!--脸部-->
- <div class="face">
- <!--白色脸底-->
- <div class="white"></div>
- <!--鼻子-->
- <div class="nose">
- <!--鼻子高光部分-->
- <div class="light"></div>
- </div>
- <!--鼻子的竖线-->
- <div class="nose_line"></div>
- <!--嘴巴-->
- <div class="mouth"></div>
- <!--胡须-->
- <div class="whiskers">
- <div class="whisker rTop r160"></div>
- <div class="whisker rMiddle"></div>
- <div class="whisker rBottom r20"></div>
- <div class="whisker lTop r20"></div>
- <div class="whisker lMiddle"></div>
- <div class="whisker lBottom r160"></div>
- </div>
- </div>
- </div>
- <!--脖子和铃铛-->
- <div class="choker">
- <!--铃铛-->
- <div class="bell">
- <div class="bell_line"></div>
- <div class="bell_circle"></div>
- <div class="bell_under"></div>
- <div class="bell_light"></div>
- </div>
- </div>
- <!--身体-->
- <div class="bodys">
- <!--肚子-->
- <div class="body"></div>
- <!--肚兜-->
- <div class="wraps"></div>
- <!--口袋-->
- <div class="pocket"></div>
- <!--遮住一半口袋,使其呈现半圆-->
- <div class="pocket_mask"></div>
- </div>
- <!--右手-->
- <div class="hand_right">
- <!--手臂-->
- <div class="arm"></div>
- <!--手掌-->
- <div class="circle"></div>
- <!--遮住手臂和身子交接处的线-->
- <div class="arm_rewrite"></div>
- </div>
- <!--左手-->
- <div class="hand_left">
- <div class="arm"></div>
- <div class="circle"></div>
- <div class="arm_rewrite"></div>
- </div>
- <!--脚-->
- <div class="foot">
- <div class="left"></div>
- <div class="right"></div>
- <!--双脚之间的缝隙-->
- <div class="foot_rewrite"></div>
- </div>
- </div>
- </div>
最好先把叮当猫的整体结构仔细研究一下,这对以后想要自己动手画别的人物形象很有帮助,思路会比较明朗。
接下来,我们按照头部,脖子,身体,脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式,叮当猫整体doraemon 设置position为relative,主要是为了便于 子元素/后代元素进行定位。
CSS Code复制内容到剪贴板- .wrapper{
- margin: 50px 0 0 500px;
- }
- .doraemon{
- position: relative;
- }
头部head的样式,因为叮当猫的头部不是正圆,所以宽高有一点偏差,然后使用border-radius将头部从矩形变成椭圆形,然后再使用径向渐变从右上角给背景来个放射性渐变,然后在加个阴影,使其更有立体感,background:#07bbee;是为了兼容低版本浏览器:
CSS Code复制内容到剪贴板- .doraemon .head {
- position:relative;
- width: 320px;
- height: 300px;
- border-radius: 150px;
- background: #07bbee;
- background: -webkit-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
- background: -moz-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
- background: -ms-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
- border:2px solid #555;
- box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
- }
惊讶 shenmgui ,这么丑,别急,慢慢让它活过来:
CSS Code复制内容到剪贴板- /*脸部*/
- .doraemon .face {
- position: relative; /*让所有脸部元素可自由定位*/
- z-index: 2; /*脸在头部背景上面*/
- }
- /*白色脸底*/
- .doraemon .face .white {
- width: 265px; /*设置宽高*/
- height: 195px;
- border-radius: 150px;
- position: absolute; /*进行绝对定位*/
- top: 75px;
- left: 25px;
- background: #fff;
- /*此放射渐变也是使脸的左下角暗一些,看上去更真实*/
- background: -webkit-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444);
- background: -moz-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444);
- background: –ms-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444);
- }
- /*鼻子*/
- .doraemon .face .nose{
- width:30px;
- height:30px;
- border-radius:15px;
- background:#c93300;
- border:2px solid #000;
- position:absolute;
- top:110px;
- left:140px;
- z-index:3; /*鼻子在白色脸底下面*/
- }
- /*鼻子上的高光*/
- .doraemon .face .nose .light {
- width:10px;
- height:10px;
- border-radius: 5px;
- box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/
- }
- /*鼻子下的线*/
- .doraemon .face .nose_line{
- width:3px;
- height:100px;
- background:#333;
- position:absolute;
- top:143px;
- left:155px;
- z-index:3;
- }
- /*嘴巴*/
- .doraemon .face .mouth{
- width:220px;
- height:400px;
- /*通过底边框加上圆角模拟微笑嘴巴*/
- border-bottom:3px solid #333;
- border-radius:120px;
- position:absolute;
- top:-160px;
- left:45px;
- }
- /*眼睛*/
- .doraemon .eyes {
- position: relative;
- z-index: 3; /*眼睛在白色脸底下面*/
- }
- /*眼睛共同的样式*/
- .doraemon .eyes .eye{
- width:72px;
- height:82px;
- background:#fff;
- border:2px solid #000;
- border-radius:35px 35px;
- position:absolute;
- top:40px;
- }
- /*眼珠*/
- .doraemon .eyes .eye .black{
- width:14px;
- height:14px;
- background:#000;
- border-radius:7px;
- position:absolute;
- top:40px;
- }
- .doraemon .eyes .left{
- left:82px;
- }
- .doraemon .eyes .rightright {
- left: 156px;
- }
- .doraemon .eyes .eye .bleft {
- left: 50px;
- }
- .doraemon .eyes .eye .bright {
- left: 7px;
- }
生病 怎么看都觉得别扭,哦!还差胡须须和白色脸底的边框呢,咱给补上:
CSS Code复制内容到剪贴板- /*胡须背景,主要用于挡住嘴巴的一部分,不要显得太长*/
- .doraemon .whiskers{
- width:220px;
- height:80px;
- background:#fff;
- border-radius:15px;
- position:absolute;
- top:120px;
- left:45px;
- z-index:2; /*在鼻子和眼睛下面*/
- }
- /*所有胡子的公用样式*/
- .doraemon .whiskers .whisker {
- width: 60px;
- height: 2px;
- background: #333;
- position: absolute;
- z-index: 2;
- }
- /*右上胡子*/
- .doraemon .whiskers .rTop {
- left: 165px;
- top: 25px;
- }
- /*右中胡子*/
- .doraemon .whiskers .rMiddle {
- left: 167px;
- top: 45px;
- }
- /*右下胡子*/
- .doraemon .whiskers .rBottom {
- left: 165px;
- top: 65px;
- }
- /*左上胡子*/
- .doraemon .whiskers .lTop {
- left: 0;
- top: 25px;
- }
- /*左中胡子*/
- .doraemon .whiskers .lMiddle {
- left: -2px;
- top: 45px;
- }
- /*左下胡子*/
- .doraemon .whiskers .lBottom {
- left: 0;
- top: 65px;
- }
- /*胡子旋转角度*/
- .doraemon .whiskers .r160 {
- -webkit-transform: rotate(160deg);
- -moz-transform: rotate(160deg);
- -ms-transform: rotate(160deg);
- -o-transform: rotate(160deg);
- transform: rotate(160deg);
- }
- .doraemon .whiskers .r20 {
- -webkit-transform: rotate(200deg);
- -moz-transform: rotate(200deg);
- -ms-transform: rotate(200deg);
- -o-transform: rotate(200deg);
- transform: rotate(200deg);
- }
微笑 这样就对了,看着多舒服啊!趁热打铁,做脖子和身体:
CSS Code复制内容到剪贴板- /*围脖*/
- .doraemon .choker {
- width: 230px;
- height: 20px;
- background: #c40;
- /*线性渐变 让围巾看上去更自然*/
- background: -webkit-gradient(linear,left top,left bottombottom,from(#c40),to(#800400));
- background: -moz-linear-gradient(center top,#c40,#800400);
- background: -ms-linear-gradient(center top,#c40,#800400);
- border: 2px solid #000;
- border-radius: 10px;
- position: relative;
- top: -40px;
- left: 45px;
- z-index: 4;
- }
- /*铃铛*/
- .doraemon .choker .bell {
- width: 40px;
- height: 40px;
- _overflow: hidden; /*IE6 hack*/
- border: 2px solid #000;
- border-radius: 50px;
- background: #f9f12a;
- background: -webkit-gradient(linear, left top, left bottombottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
- background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
- background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
- box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
- position: absolute;
- top: 5px;
- left: 90px;
- }
- /*双横线*/
- .doraemon .choker .bell_line {
- width: 36px;
- height: 2px;
- background: #f9f12a;
- border: 2px solid #333;
- border-radius: 3px 3px 0 0;
- position: absolute;
- top: 10px;
- }
- /*黑点*/
- .doraemon .choker .bell_circle{
- width:12px;
- height:10px;
- background:#000;
- border-radius:5px;
- position:absolute;
- top:20px;
- left:14px;
- }
- /*黑点下的线*/
- .doraemon .choker .bell_under{
- width: 3px;
- height:15px;
- background:#000;
- position:absolute;
- left: 18px;
- top:27px;
- }
- /*铃铛高光*/
- .doraemon .choker .bell_light{
- width:12px;
- height:12px;
- border-radius:10px;
- box-shadow:19px 8px 5px #fff;
- position:absolute;
- top:-5px;
- left:5px;
- opacity:0.7;
- }
- /*身子*/
- .doraemon .bodys {
- position: relative;
- top: -310px;
- }
- /*肚子*/
- .doraemon .bodys .body {
- width: 220px;
- height: 165px;
- background: #07beea;
- background: -webkit-gradient(linear,rightright top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
- background: -moz-linear-gradient(rightright center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
- background: -ms-linear-gradient(rightright center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
- border:2px solid #333;
- position:absolute;
- top:265px;
- left:50px;
- }
- /*白色肚兜*/
- .doraemon .bodys .wraps {
- width: 170px;
- height: 170px;
- background: #fff;
- background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
- background: -moz-linear-gradient(rightright top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
- background: -ms-linear-gradient(rightright top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
- border: 2px solid #000;
- border-radius: 85px;
- position: absolute;
- left: 72px;
- top: 230px;
- }
- /*口袋*/
- .doraemon .bodys .pocket {
- width: 130px;
- height: 130px;
- border-radius: 65px;
- background: #fff;
- background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
- background: -moz-linear-gradient(rightright top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
- background: -ms-linear-gradient(rightright top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
- border: 2px solid #000;
- position:absolute;
- top: 250px;
- left: 92px;
- }
- /*挡住口袋一半*/
- .doraemon .bodys .pocket_mask {
- width: 134px;
- height: 60px;
- background:#fff;
- border-bottom: 2px solid #000;
- position:absolute;
- top: 259px;
- left: 92px;
- }
现在看起来有点像摆设品,不过笑容还是那么单纯,好了,赶紧把手脚做出来:
CSS Code复制内容到剪贴板- /*左右手*/
- .doraemon .hand_right, .doraemon .hand_left {
- height: 100px;
- width: 100px;
- position: absolute;
- top: 272px;
- left: 248px;
- }
- /*左手*/
- .doraemon .hand_left {
- left: -10px;
- }
- /*手臂公共部分*/
- .doraemon .arm {
- width:80px;
- height:50px;
- background: #07beea;
- background: -webkit-gradient(linear, left top, left bottombottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
- background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
- background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
- border: 1px solid #000000;
- box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
- z-index: -1;
- position: relative;
- }
- /*右手手臂*/
- .doraemon .hand_right .arm {
- top: 17px;
- -webkit-transform: rotate(35deg);
- -moz-transform: rotate(35deg);
- -ms-transform: rotate(35deg);
- -o-transform: rotate(35deg);
- transform: rotate(35deg);
- }
- /*左手手臂*/
- .doraemon .hand_left .arm {
- top: 17px;
- background: #0096be; /*背光一面使用纯色,使其有立体感*/
- box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
- -webkit-transform: rotate(145deg);
- -moz-transform: rotate(145deg);
- -ms-transform: rotate(145deg);
- -o-transform: rotate(145deg);
- transform: rotate(145deg);
- }
- /*圆形手掌公共部分*/
- .doraemon .circle {
- width: 60px;
- height: 60px;
- border-radius: 30px;
- border: 2px solid #000;
- background: #fff;
- background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
- background: -moz-linear-gradient(rightright top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
- background: -ms-linear-gradient(rightright top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
- position: absolute;
- }
- /*右手手掌*/
- .doraemon .hand_right .circle {
- left: 40px;
- top: 32px;
- }
- /*左手手掌*/
- .doraemon .hand_left .circle {
- left: -20px;
- top: 32px;
- }
- /*手臂和身体结合处,使用背景遮住边框*/
- .doraemon .arm_rewrite {
- height: 45px;
- width: 5px;
- background: #07beea;
- position: relative;
- }
- /*右手结合处*/
- .doraemon .hand_right .arm_rewrite {
- top: -45px;
- left: 22px;
- }
- /*左手结合处*/
- .doraemon .hand_left .arm_rewrite {
- top: -45px;
- left: 60px;
- background: #0096be; /*同理,背光一面使用纯色,使其有立体感*/
- }
- /*脚部*/
- .doraemon .foot {
- width: 280px;
- height: 40px;
- position: relative;
- top: 55px;
- left: 20px;
- }
- /*左右脚共同样式*/
- .doraemon .foot .left, .doraemon .foot .rightright {
- width: 125px;
- height: 30px;
- background: #fff;
- background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
- background: -moz-linear-gradient(rightright top, #fff, #fff 75%, #eee 85%, #999);
- background: -ms-linear-gradient(rightright top, #fff, #fff 75%, #eee 85%, #999);
- border: 2px solid #333;
- border-radius: 80px 60px 60px 40px;
- box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
- position: relative;
- }
- .doraemon .foot .left {
- left: 8px;
- top: 65px;
- }
- .doraemon .foot .rightright {
- top: 31px;
- left: 141px;
- }
- /*双脚之间的缝隙,加阴影使用立体感*/
- .doraemon .foot .foot_rewrite {
- width: 20px;
- height: 10px;
- background: #fff;
- background: -webkit-gradient(linear, rightright top, left bottombottom, from(#666),color-stop(0.83,#fff), to(#fff));
- background: -moz-linear-gradient(rightright top, #666, #fff 83%, #fff);
- background: -ms-linear-gradient(rightright top, #666, #fff 83%, #fff);
- /*制作半圆效果*/
- border: 2px solid #000;
- border-bottom: none;
- border-radius: 40px 40px 0 0;
- position: relative;
- top: -11px;
- left: 130px;
- _left: 127px;
- }
看一下,效果是不是和一开始的一样呢 大笑 ,虽然做好了,但是还是可以让它动起来的,比如眼睛,我们可以给它加个动画效果,让眼睛转动起来:
CSS Code复制内容到剪贴板- /*眼珠*/
- .doraemon .eyes .eye .black {
- width: 14px;
- height: 14px;
- background: #000;
- border-radius: 7px;
- position: absolute;
- top: 40px;
- -webkit-animation: eyemove 3s linear infinite;
- -moz-animation: eyemove 3s linear infinite;
- -ms-animation: eyemove 3s linear infinite;
- -o-animation: eyemove 3s linear infinite;
- animation: eyemove 3s linear infinite;
- }
- /*让眼睛动起来*/
- @-webkit-keyframes eyemove {
- 70%{
- margin:0 0 0 0;
- }
- 80% {
- margin: -22px 0 0 0;
- }
- 85% {
- margin: -22px 0 0 5px;
- }
- 90% {
- margin: -22px 10px 0 0;
- }
- 93% {
- margin: -22px 0 0 0;
- }
- 96% {
- margin: 0 0 0 0;
- }
- }
- @-moz-keyframes eyemove {
- 70% {
- margin: 0 0 0 0;
- }
- 80% {
- margin: -22px 0 0 0;
- }
- 85% {
- margin: -22px 0 0 5px;
- }
- 90% {
- margin: -22px 10px 0 0;
- }
- 93% {
- margin: -22px 0 0 0;
- }
- 96% {
- margin: 0 0 0 0;
- }
- }
- @-o-keyframes eyemove {
- 70% {
- margin: 0 0 0 0;
- }
- 80% {
- margin: -22px 0 0 0;
- }
- 85% {
- margin: -22px 0 0 5px;
- }
- 90% {
- margin: -22px 10px 0 0;
- }
- 93% {
- margin: -22px 0 0 0;
- }
- 96% {
- margin: 0 0 0 0;
- }
- }
- @keyframes eyemove {
- 70% {
- margin: 0 0 0 0;
- }
- 80% {
- margin: -22px 0 0 0;
- }
- 85% {
- margin: -22px 0 0 5px;
- }
- 90% {
- margin: -22px 10px 0 0;
- }
- 93% {
- margin: -22px 0 0 0;
- }
- 96% {
- margin: 0 0 0 0;
- }
- }
OK,这样,眼睛就会动了,有兴趣的可以试一下,这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试,那么这个案例就结束了。
PS:虽然这只是一个案例,不过确实帮助我开阔思维,而且其实做一个这样的效果,可能会花费很多时间,至少对我来说目前确实是这样子,主要难点还是布局定位和颜色的合理搭配,才能使形象更加逼真生动!
CSS3,绘图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]