小熊猫"/>
闲着无聊，CSS画个小熊猫
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>panda</title>
</head><body><div class="contain"><figure class="panda"></figure></div></body></html>
<style>.contain {width: 31em;height: 26em;background-color: rgb(24, 145, 135);border-radius: 5%;margin-top: 100px;margin-left: 40%;display: flex;align-items: center;justify-content: center;}.panda {width: 21em;height: 16em;background-color: white;border-width: 3px 3px 6px 6px;border-style: solid;border-color: black;border-radius: 11em 11em 11em 11em/11em 11em 6em 6em;position: relative;background-image: radial-gradient(ellipse at 50% 60%, #333 1.2em, transparent 1.2em),radial-gradient(ellipse at 50% 80%, #333 0.6em, transparent 0.6em);box-shadow: inset 1em -1em 0#eee;}.panda::before {width: 7em;height: 4em;content: '';position: absolute;background-color: #333;top: 5.5em;left: 2.9em;border-radius: 50% 50% 42% 42%;transform: rotate(314deg);background-image: radial-gradient(circle at 5.1em 2em, white 0.3em, transparent 0.3em), radial-gradient(circle at 4.6em 2em, #333 0.7em, transparent 0.7em),radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);box-shadow: -1em -7.2em 0 -0.4em #333;}.panda::after {width: 7em;height: 4em;content: '';position: absolute;background-color: #333;top: 5.5em;left: 11.5em;border-radius: 50% 50% 42% 42%;transform: rotate(45deg);background-image: radial-gradient(circle at 1.6em 2em, white 0.3em, transparent 0.3em), radial-gradient(circle at 2.1em 2em, #333 0.7em, transparent 0.7em),radial-gradient(circle at 2.2em 2em, white 1em, transparent 1em);box-shadow: 0.8em -6.8em 0 -0.4em #333;}
</style>更多推荐
闲着无聊,CSS画个小熊猫
发布评论