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"> .boxDom { width: 800px; height: 800px; position: relative; margin: auto; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } .ear { width: 274px; height: 224px; position: absolute; z-index: -1; } .leftEar { top: 20px; left: 0px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } .rightEar { right: 0px; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); top: 20px; } .earOne { width: 250px; height: 200px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 10px solid #000; background: #fff500; } .earTwo { width: 180px; height: 130px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: #A45F28; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .face { width: 600px; height: 500px; /*border:6px solid #000;*/ border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: #fff500; position: absolute; left: 0; right: 0; top: 50px; margin: 0 auto; z-index: -1; } .eye { position: absolute; top: -60px; bottom: 0; margin: auto; width: 120px; height: 200px; } .leftEye { left: 100px; } .rightEye { right: 100px; } .eyeBox { width: 100px; height: 150px; border-radius: 50%; position: relative; border: 10px solid #000; } .eyeOne { width: 90px; height: 130px; border-radius: 50%; background: #0093dd; position: absolute; bottom: 0px; left: 0px; right: 0px; margin: -10px auto; z-index: -1; } .eyeTwo { width: 35px; height: 70px; border-radius: 50%; background: #fff; position: absolute; bottom: 0px; left: 0px; right: 0px; margin: -10px auto; z-index: -1; } .eyeLine { width: 160px; height: 100px; border-radius: 50%; border-top: 10px solid #000; border-bottom: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; margin-top: -10px; } .left { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); left: -20px; } .right { transform: rotate(10deg); right: -20px; } .mouth { width: 700px; height: 350px; border-radius: 50%; background: #fff500; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; margin-bottom: 100px; } .mouthLine { width: 360px; height: 300px; border-radius: 50%; border-top: 10px solid transparent; border-bottom: 20px solid #f00; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; /*top: 0px; bottom: 0px;*/ top: 0px; left: 0px; right: 0px; margin: -100px auto; } </style> </head> <body> <div class="boxDom"> <div class="ear leftEar"> <div class="earOne"></div> <div class="earTwo"></div> </div> <div class="ear rightEar"> <div class="earOne"></div> <div class="earTwo"></div> </div> <div class="face"> <div class="eye leftEye"> <div class="eyeBox"> <div class="eyeOne"></div> <div class="eyeTwo"></div> </div> <div class="eyeLine left"></div> </div> <div class="eye rightEye"> <div class="eyeBox"> <div class="eyeOne"></div> <div class="eyeTwo"></div> </div> <div class="eyeLine right"></div> </div> </div> <div class="mouth"> <div class="mouthLine"></div> </div> </div> </body> </html>
相關文章
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- angularjs實現的購物車效果程式碼例項AngularJS
- 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
- canvas實現的動態心形效果程式碼例項Canvas
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- css3實現的立體導航選單效果程式碼例項CSSS3