使用HTML和CSS3繪制基本卡通圖案的示例分享

2020-03-24 16:01:43

字體：大中小

來源：轉載

供稿：網友

純HTML+CSS實現阿童木頭像
先上最終效果圖：
在里面主要用的了CSS中的幾個屬性：position 定位；border-radius 圓角；box-shadow 陰影；background（linear-gradient）漸變；transform 旋轉和變換；animation 動畫，技術點不是很多，主要是細心和耐心。還是直接上最終源碼吧。由于考慮瀏覽器的CSS兼容性，代碼比較多。
CSS Code復制內容到剪貼板 !DOCTYPEhtml htmlxmlns= http://www.w3.org/1999/xhtml head metacontent= text/html;charset=utf-8 http-equiv= Content-Type / title 純CSS漫畫 /title styletype= text/css *{ margin:0; padding:0; } .outer-circle{ position:absolute; top:32px; left:44px; width:289px; height:289px; border:4pxsolid#75BD4F; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .inner-circle{ position:relative; width:269px; height:269px; border:10pxsolid#F5F910; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:#73BF43; } .inner-circlediv{ position:absolute; } .inner-circle-light{ top:41px; left:35px; -moz-box-shadow:26px26px29px37px#fff; -webkit-box-shadow:26px26px29px37px#fff; box-shadow:26px26px29px37px#fff; } .header-top{ top:11px; rightright:2px; z-index:100; width:180px; height:90px; -moz-border-radius:90px90px00; -webkit-border-radius:90px90px00; border-radius:90px90px00; 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:228px00228px; -webkit-border-radius:228px00228px; border-radius:228px00228px; 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:30px180px; border-top-left-radius:30px180px; -webkit-border-bottom-left-radius:30px80px; border-bottom-left-radius:30px80px; 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:26px120px; border-top-rightright-radius:26px120px; 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:2pxsolid#000; border-bottom-width:1px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:#F6C6B0; -moz-box-shadow:-4px000#de9876inset; -webkit-box-shadow:-4px000#de9876inset; box-shadow:-4px000#de9876inset; -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:1pxsolid#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:2pxsolid#110b00; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; -moz-box-shadow:0px2px00#de9876inset; -webkit-box-shadow:0px2px00#de9876inset; box-shadow:0px2px00#de9876inset; -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-3px00#fffinset; -webkit-box-shadow:3px-3px00#fffinset; box-shadow:3px-3px00#fffinset; } .face-top{ top:61px; rightright:75px; z-index:105; width:111px; height:46px; -moz-border-radius:50%50%26px0; -webkit-border-radius:50%50%26px0; border-radius:50%50%26px0; 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%00; -webkit-border-radius:100%00; border-radius:100%00; 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:70px40px; -webkit-更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：使用CSS3美化HTML表單的技巧演示

下一篇：js css+html實現簡單的日歷