最近看了很多關于css3的知識和文章，覺得css3用起來很方便，使用css3的話，在頁面布局上可以省去很多不必要的代碼。所以最近用css3仿寫了我每天都照顧的寵物小雞的模樣，第一次寫，有些細節處理的不夠好。
先看最終效果圖：
接下來是我書寫的步驟：
首先是html,分別寫出云朵，小雞的身體，雞冠，眼睛，嘴巴，腮紅，翅膀，雞爪
<body> <div class="content"> <!-- 天上的云 --> <div class="cloud"> <div class="content"></div> </div> <!--雞冠--> <div class="crest"></div> <!--翅膀--> <div class="hand"></div> <!-- 寵物小雞body --> <div class="egg"> <!--眼睛--> <div class="eye"></div> <!--腮紅--> <div class="blush"></div> <!--嘴--> <div class="mouth"></div> <!--腳--> <div class="feet"></div> </div> </div></body>
接下來是css設置樣式：
先設置整體的背景色，使用的是線性漸變linear-gradient，設置藍天色和草地色，并設置讓元素居中。
.content { width: 100%; height: 800px; background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px); display: flex; justify-content: center; align-items: center; }天上的云：先給一定的寬高和背景色，使用border-radius設置邊框圓角效果，只設置左上和右上。效果如下：
border-radius: 100% 100% 0 0;
在使用：：before和：：after偽元素畫出一朵完整的云：
.content::before, .content::after { content: ''; position: absolute; bottom: 0; } .content::before { width: 40px; height: 40px; background: currentColor; left: -20px; border-radius: 100% 100% 0 100%; } .content::after { width: 35px; height: 30px; background: currentColor; right: -20px; border-radius: 100% 100% 100% 0; } 然后使用陰影在畫出兩朵云
.content,.content::before,.content::after { box-shadow: -200px 50px 0 -5px rgb(191, 232, 252), 200px 60px 0 10px rgb(191, 233, 253); }
云朵實現了。
接下來是寵物小雞，先把身體寫出來，同樣用border-radius設置邊框圓角效果，畫出雞蛋的模樣，設置背景色，并使用box-shadow設置向內的陰影。
.egg { width: 220px; height: 260px; border-radius: 100%; background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213)); position: absolute; display: flex; flex-direction: column; align-items: center; box-shadow: 0 -10px 10px 3px rgba(211, 194, 194,0.4) inset;}
雞冠和云朵的寫法差不多
.crest { position: relative; top: -17%; width: 30px; height: 25px; background: rgb(233, 19, 19); border-radius: 50% 100% 20% 20%; } .crest::before, .crest::after { content: ''; position: absolute; bottom: 0; width: 20px; background: rgb(233, 19, 19); } .crest::before { left: -5px; height: 20px; border-radius: 100% 50% 0 20%; } .crest::after { right: -15px; height: 15px; background: rgb(233, 19, 19); border-radius: 20% 200% 20% 30%; }眼睛，翅膀，腮紅，分別用偽元素左右定位設置大小即可實現。嘴部使用transform旋轉45°并使用線性漸變設置雞嘴的陰影效果。
全部css代碼如下（我安裝了sass插件，所以是scss的寫法）：
body { margin: 0; width: 100%; height: 100%; >.content { width: 100%; height: 800px; background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px); display: flex; justify-content: center; align-items: center; >.cloud { position: absolute; top: 5%; color: rgb(216, 242, 254); >.content { width: 50px; height: 50px; background: currentColor; border-radius: 100% 100% 0 0; } >.content::before, >.content::after { content: ''; position: absolute; bottom: 0; } >.content::before { width: 40px; height: 40px; background: currentColor; left: -20px; border-radius: 100% 100% 0 100%; } >.content::after { width: 35px; height: 30px; background: currentColor; right: -20px; border-radius: 100% 100% 100% 0; } >.content, .content::before, .content::after { box-shadow: -200px 50px 0 -5px rgb(191, 232, 252), 200px 60px 0 10px rgb(191, 233, 253); } } >.egg { width: 220px; height: 260px; border-radius: 100%; background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213)); position: absolute; display: flex; flex-direction: column; align-items: center; box-shadow: 0 -10px 10px 3px rgba(211, 194, 194,0.4) inset; >.eye::before, .eye::after { content: ''; position: absolute; top: 15%; width: 12px; height: 28px; border-radius: 100%; background: radial-gradient(white 1px, rgb(57, 56, 57) 5%); } > .eye::before{ left: 28%; } >.eye::after { right: 28%; } >.blush::before, .blush::after { content: ''; position: absolute; top: 30%; width: 25px; height: 5px; transform: rotate(0deg); background: rgb(250, 108, 127); border-radius: 100%; box-shadow: 0 0 5px 4px rgb(250, 108, 127); } >.blush::before { left: 20%; } >.blush::after { right: 20%; } >.mouth { position: absolute; top: 32%; width: 20px; height: 20px; background: linear-gradient(135deg, rgb(255, 207, 0) 50%, rgb(224, 184, 2) 50%); transform: rotate(45deg); border-radius: 5% 15%; } > .feet::before, .feet::after{ content: ''; position: absolute; bottom: -12px; width: 10px; height: 15px; border: 7px solid rgb(71, 49, 20); } > .feet::before{ left: 60px; border-radius: 80% 100% 100% 50%; transform: rotate(-10deg); border-color: transparent transparent transparent rgb(71, 49, 20); } > .feet::after{ right: 60px; border-radius: 100% 80% 50% 0%; transform: rotate(10deg); border-color: transparent rgb(71, 49, 20) transparent transparent ; } } >.crest { position: relative; top: -17%; width: 30px; height: 25px; background: rgb(233, 19, 19); border-radius: 50% 100% 20% 20%; } >.crest::before, .crest::after { content: ''; position: absolute; bottom: 0; width: 20px; background: rgb(233, 19, 19); } >.crest::before { left: -5px; height: 20px; border-radius: 100% 50% 0 20%; } >.crest::after { right: -15px; height: 15px; background: rgb(233, 19, 19); border-radius: 20% 200% 20% 30%; } > .hand{ position: relative; top: -5%; } > .hand::before, .hand::after{ content: ''; position: absolute; } > .hand::before{ left:-135px; width: 20px; height: 80px; transform: rotate(15deg); background: rgb(250, 242, 242); border-radius: 100% 0 50% 50%; } > .hand::after{ right: -110px; width: 20px; height: 80px; transform: rotate(-15deg); background: rgb(250,242,242); border-radius: 50% 100% 50% 50%; } }}總結
以上所述是小編給大家介紹的純css3實現寵物小雞實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
