css3實現的動態大白效果程式碼例項
大白是一個可愛的形象,下面就通過一個程式碼例項介紹一下如何利用css3實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *, body { margin: 0; padding: 0; } .wrap { width: 480px; height: 700px; position: relative; } .background { width: 480px; height: 700px; position: absolute; background: #597370; overflow: hidden; } .background_box1 { width: 300px; height: 50px; margin: 0 auto; border: 4px solid #394946; border-top: none; box-shadow: 0 -1px 5px rgba(0,0,0,1); } .background_box2 { width: 300px; height: 80px; margin: 0 auto; border: 4px solid #394946; box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset; background: #394946; } .background_box3 { position: relative; width: 300px; height: 300px; margin: 0 auto; border: 4px solid #394946; box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset; background: #394946; } .background_box3:after { content: ""; position: absolute; width: 95%; height: 97%; margin: 1%; border: 4px solid #394946; background: #2f3f4e; } .background_box4 { width: 100%; height: 80px; margin: 2px auto; border-top: 4px solid #394946; border-bottom: 4px solid #394946; box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset; background: #2c3733; } .background_box5 { width: 100%; height: 15px; margin: 0 auto; box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset; background: #2c3733; } .background_line1 { position: absolute; left: -41px; top: 625px; width: 165px; height: 3px; margin: 0 auto; -webkit-transform: rotate(-240deg); -moz-transform: rotate(-240deg); -o-transform: rotate(-240deg); transform: rotate(-240deg); background: rgba(0,0,0,0.3); } .background_line2 { position: absolute; left: 353px; top: 625px; width: 165px; height: 3px; margin: 0 auto; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); background: rgba(0,0,0,0.3); } .body { width: 480px; height: 700px; position: absolute; } .cpu { position: absolute; left: 270px; top: 170px; width: 30px; height: 30px; background: #E4E4E4; border-radius: 70% 100%; box-shadow: 0px 2px 3px rgba(0,0,0,0.2),0px 2px 3px rgba(255,255,255,1) inset; z-index: 2; } .heart { width: 16px; height: 20px; position: relative; } .heart:before { position: absolute; left: 10px; top: 10px; content: " "; width: 8px; height: 12px; border: 0 solid transparent; border-radius: 25px 10px 0 0; background: #E24C4C; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .heart:after { position: absolute; left: 14px; top: 10px; content: " "; width: 8px; height: 12px; border: 0 solid transparent; border-radius: 10px 25px 0 0; background: #E24C4C; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .head { position: absolute; left: 177px; top: 67px; width: 110px; height: 76px; border-radius: 50% 45%; box-shadow: 0 10px 5px rgba(0,0,0,0.2); background: -webkit-linear-gradient(top, #fff 30%, #d6d6d6); z-index: 2; } .eye1 { position: absolute; left: 20px; top: 30px; width: 12px; height: 12px; border-radius: 100%; background: #000; -webkit-animation: eye 2s ease infinite; -moz-animation: eye 2s ease infinite; -o-animation: eye 2s ease infinite; animation: eye 2s ease infinite; } .eye2 { position: absolute; left: 76px; top: 30px; width: 12px; height: 12px; border-radius: 100%; background: #000; -webkit-animation: eye 2s ease infinite; -moz-animation: eye 2s ease infinite; -o-animation: eye 2s ease infinite; animation: eye 2s ease infinite; } .eyeline { position: absolute; left: 30px; top: 36px; width: 50px; height: 1px; background: #000; } @keyframes eye { 0%,20%, 100% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } 10% { -webkit-transform: scale(1,0.2); -moz-transform: scale(1,0.2); -o-transform: scale(1,0.2); transform: scale(1,0.2); } } @-webkit-keyframes eye { 0%,20%, 100% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } 10% { -webkit-transform: scale(1,0.2); -moz-transform: scale(1,0.2); -o-transform: scale(1,0.2); transform: scale(1,0.2); } } .trunk { position: absolute; left: 106px; top: 100px; z-index: 1; } .trunk1 { position: absolute; left: 27px; top: 19px; width: 50px; height: 64px; border: 79px solid #eee; background: #eee; border-radius: 100%; } .trunk2 { position: absolute; left: 22px; top: 100px; width: 100px; height: 200px; background: #eee; -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); box-shadow: -1px 1px 2px rgba(0,0,0,0.2); } .trunk2:after { content: ""; position: absolute; left: 113px; top: -27px; width: 100px; height: 200px; background: #eee; -webkit-transform: rotate(-24deg); -moz-transform: rotate(-24deg); -o-transform: rotate(-24deg); transform: rotate(-24deg); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } .trunk3 { position: absolute; left: 0px; top: 201px; width: 260px; height: 200px; border-radius: 100%; box-shadow: 0 10px 5px rgba(0,0,0,0.2); background: -webkit-linear-gradient(top, #eee 30%, #E4E4E4 60%, #e9e9e9 90%); } .hand { } .hand1 { position: absolute; left: 16px; top: 196px; width: 320px; height: 143px; border-top: 76px solid #eee; border-radius: 32% 52%; -webkit-transform: rotate(-80deg); -moz-transform: rotate(-80deg); -o-transform: rotate(-80deg); transform: rotate(-80deg); z-index: 0; } .hand2 { position: absolute; left: 136px; top: 196px; width: 320px; height: 143px; border-top: 76px solid #eee; border-radius: 52% 32%; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); z-index: 0; } .finger1 { position: absolute; left: 88px; top: 427px; width: 20px; height: 48px; border-radius: 0 0 80% 50%; background: #eee; -webkit-transform: rotate(-32deg); -moz-transform: rotate(-32deg); -o-transform: rotate(-32deg); transform: rotate(-32deg); } .finger2 { position: absolute; left: 104px; top: 426px; width: 20px; height: 43px; border-radius: 0 0 100% 45%; background: #eee; -webkit-transform: rotate(-32deg); -moz-transform: rotate(-32deg); -o-transform: rotate(-32deg); transform: rotate(-32deg); } .finger3 { position: absolute; left: 364px; top: 427px; width: 20px; height: 48px; border-radius: 0 0 80% 50%; background: #eee; -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg); -o-transform: rotate(32deg); transform: rotate(32deg); } .finger4 { position: absolute; left: 353px; top: 426px; width: 20px; height: 43px; border-radius: 0 0 100% 45%; background: #eee; -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg); -o-transform: rotate(32deg); transform: rotate(32deg); } .foot { position: absolute; left: 135px; top: 455px; z-index: 0; } .foot1 { position: absolute; left: 0; top: 0; width: 100px; height: 140px; background: -webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd); border-radius: 10% 9% 22% 62%; } .foot2 { position: absolute; left: 100px; top: 0; width: 100px; height: 140px; background: -webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd); border-radius: 10% 9% 62% 22%; box-shadow: -2px 0 2px rgba(0,0,0,0.1); } </style> </head> <body> <div class="wrap"> <div class="background"> <div class="background_box1"></div> <div class="background_box2"></div> <div class="background_box3"></div> <div class="background_box4"></div> <div class="background_box5"></div> <div class="background_line1"></div> <div class="background_line2"></div> </div> <div class="body"> <div class="cpu"> <div class="heart"></div> </div> <div class="head"> <div class="eye1"></div> <div class="eye2"></div> <div class="eyeline"></div> </div> <div class="trunk"> <div class="trunk1"></div> <div class="trunk2"></div> <div class="trunk3"></div> </div> <div class="hand"> <div class="hand1"></div> <div class="hand2"></div> <div class="hand3"></div> <div class="hand4"></div> <div class="finger1"></div> <div class="finger2"></div> <div class="finger3"></div> <div class="finger4"></div> </div> <div class="foot"> <div class="foot1"></div> <div class="foot2"></div> </div> </div> </div> </body> </html>
相關文章
- CSS3動態大白效果程式碼CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- canvas實現的動態心形效果程式碼例項Canvas
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- javascript動態實現的表單提交效果程式碼例項JavaScript
- css3晃動效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- CSS3星系運動效果程式碼例項CSSS3
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現button按鈕美化效果程式碼例項CSSS3
- css3實現網狀球體效果程式碼例項CSSS3
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- js實現的div拖動效果例項程式碼JS
- js實現的元素抖動效果程式碼例項JS
- jquery實現的滑動軸效果程式碼例項jQuery
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- css3實現的div上下左右翻轉效果程式碼例項CSSS3