Статья была впервые опубликована в моем блоге:lanjianguo.github.io/blog/
Несколько дней назад я увидел статью о рисовании Tencent Penguin с помощью CSS3. Воспользовавшись сегодня свободным временем, я буду использовать CSS3 для написания Baidu Xiaodu Bear. Без дальнейших церемоний, давайте начнем кодировать.
взрыв фото
Сфотографируем результат милого медвежонка.
Прежде чем рисовать Xiaoduxiong, мы должны сначала разложить макет Xiaoduxiong, чтобы мы могли организовать структуру кода. Из общей структуры он в основном делится на уши, голову и тело. Вкладываем руки, живот и ноги в части тела синхронно.
<!-- 页面框架 -->
<!Doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<title>纯css度熊</title>
<link rel="stylesheet" href="./bear.css"/>
</head>
<body>
<!-- 背景 -->
<div class="bac">
<!-- 头部 -->
<!-- 耳朵 -->
<div class="earLeft"></div>
<div class="earRight"></div>
<!-- 脸 -->
<div class="head"></div>
<!-- 身体 -->
<div class="body">
<!-- 胳膊 -->
<div class="armLeft"></div>
<div class="armRight"></div>
<!-- 肚子 -->
<div class="tummy"></div>
<!-- 腿 -->
<div class="legLeft"></div>
<div class="legRight"></div>
</div>
<!-- 阴影 -->
<div class="shaodw"></div>
</div>
</body>
После того, как структура настроена, мы сначала устанавливаем положение и размер фонового контейнера. При разработке можно сначала задать для фона темный фон, чтобы мы могли видеть положение каждой части, а потом в конце закомментировать.
/*背景容器*/
*{
margin:0px;
padding:0px;
}
html{
height:100%;
}
body{
height:100%;
background-color: #333333;
}
.bac {
width: 345px;
height: 500px;
top: 50%;
position: relative;
left: 50%;
transform: translate(-50%,-50%);
/* background-color: #333333; */
}
голова
Затем мы можем разместить детали в контейнере, я написал его сверху вниз, поэтому голова на первом месте.
/*头部*/
.bac .head {
width: 346px;
height: 288px;
/* background-color: #e1b79b; */
border: 3px solid #a57662;
border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
position: relative;
z-index: 88;
}
Точка знания здесь, как вы можете нарисовать такую неправильную форму? Чтобы нарисовать такую фигуру с дугой, вы можете использовать свойство border-radius.Конкретное использование не будет подробно обсуждаться здесь.Короче говоря, установив значение радиуса границы элемента, вы можете легко установить закругленную рамку для элемента, и даже реализовать рисунок круга, полукруга, четверти круга и других округлых форм. Поскольку у меня нет точной таблицы размеров, я просто использовал проценты.
Четыре значения перед «/» представляют горизонтальный радиус закругленного угла, а следующие четыре значения представляют собой вертикальный радиус закругленного угла. Мы будем часто использовать этот метод в будущем.
ухо
Нарисовав контур головы, мы также можем добавить контур уха.Первоначальный план состоял в том, чтобы написать ухо на голове.
/*左耳朵*/
.earLeft {
height: 50px;
width: 70px;
/* background-color: #e1b79b; */
border-radius: 200px 200px 100px 100px;
border: 3px solid #a57662;
transform: rotate(-49deg);
position: absolute;
top: 10px;
left: 12px;
}
/*右耳朵*/
.earRight {
height: 50px;
width: 70px;
/* background-color: #e1b79b; */
border-radius: 200px 200px 100px 100px;
border: 3px solid #a57662;
transform: rotate(40deg);
position: absolute;
top: 10px;
right: 0;
}
Глаз
Далее начинаем заполнять и рисовать содержимое головы.Голова это в основном глаза,нос и рот.Сначала нарисуем глаза.Для того,чтобы было четко видно,мы заполним голову цветом.
/*左眼白*/
.head .eyeLeft {
height: 78px;
width: 67px;
background-color: #ffffff;
border-radius: 50% / 50%;
transform: rotate(20deg);
position: absolute;
top: 113px;
left: 68px;
}
/*左眼珠*/
.head .eyeConLeft {
width: 28px;
height: 33px;
background-color: #511313;
position: absolute;
border-radius: 50%/50%;
transform: rotate(-13deg);
top: 20px;
right: 15px;
}
/*右眼白*/
.head .eyeRight {
height: 78px;
width: 67px;
background-color: #ffffff;
border-radius: 50% / 50%;
transform: rotate(-20deg);
position: absolute;
top: 113px;
right: 68px;
}
/*右眼珠*/
.head .eyeConRight {
width: 28px;
height: 33px;
background-color: #511313;
position: absolute;
border-radius: 50%/50%;
transform: rotate(13deg);
top: 20px;
left: 15px;
}
рот
После того, как нарисовали глаза, давайте нарисуем рот. Рот не слишком особенный. Мы можем использовать обычные эллипсы.
/*嘴巴*/
.head .mouse {
width: 99px;
height: 76px;
background-color: #f7f9e5;
position: absolute;
left: 50%;
transform: translate(-50%,0);
border-radius: 50% / 50%;
top: 187px;
}
нос
Хотя рот обычный эллипс, но нос особенный, его можно рассматривать как полуэллипс + треугольник.
Снова наступает момент знаний, как нарисовать полуэллипс и треугольник с помощью css?
Мы можем использовать border-radius: 50%/100% 100% 0 0, чтобы нарисовать полуэллипс.
Мы рисуем треугольник, установив ширину и высоту на 0 и используя свойство границы.
Для удобства работы я поставил контейнер для носа по центру для удобства регулировки.
/*鼻子容器*/
.head .nose {
width: 18px;
height: 14px;
position: absolute;
left: 50%;
margin-left: -9px;
top: 13px;
}
/* 鼻子上部分-半椭圆*/
.nose .noseTop {
width: 18px;
height: 8px;
background-color: #511313;
border-radius: 50%/100% 100% 0 0;
}
/* 鼻子下部分-三角形*/
.nose .noseBottom {
width: 0;
height: 0;
border-width: 9px 9px 0;
border-style: solid;
border-color: #511313 transparent transparent;
position: relative;
}
внутри уха
Наконец-то закончил операцию головы, и оказалось, что чего-то не хватает в ухе.Оказалось, что не хватает внутренних элементов уха, поэтому мы добавили кое-что внутрь уха.
/* 左耳朵内部*/
.earLeft .earCon {
width: 40px;
height: 60px;
background-color: #eed8c5;
border-radius: 50%/ 40% 40% 30% 30%;
margin-left: 17px;
margin-top: 15px;
transform: rotate(-3deg);
}
/*右耳朵内部*/
.earRight .earCon {
width: 40px;
height: 60px;
background-color: #eed8c5;
border-radius: 50%/ 40% 40% 30% 30%;
margin-left: 17px;
margin-top: 15px;
transform: rotate(-3deg);
}
Вспомогательные элементы
Голова медвежонка нарисована, но место для ушей не идеально, так как контур головы закрывает уши, мы хотим соединить голову и уши воедино, для чего используем наши вспомогательные элементы. Мы можем установить вспомогательный элемент того же цвета, что и голова, и закрыть контур между головой и ушами, и это будет выглядеть намного лучше.
/*左侧辅助要素*/
.head .arcLeft {
position: absolute;
top: 36px;
left: 23px;
width: 80px;
height: 30px;
background-color: #e1b79b;
border-radius: 50%/ 50%;
transform: rotate(-45deg);
}
/*右侧辅助要素*/
.head .arcRight {
position: absolute;
top: 34px;
right: 16px;
width: 80px;
height: 30px;
background-color: #e1b79b;
border-radius: 50%/ 50%;
transform: rotate(43deg);
}
тело
Наконец, рисунок головы завершен, а затем начинается рисунок тела.Также необходимо проанализировать части тела.Мы видим, что тело в основном включает в себя руки, живот и ноги.
Чтобы четко видеть положение каждой части, мы можем сначала добавить фоновый цвет к контейнеру body, а затем, наконец, удалить его.
/*度熊身体*/
.body {
width: 208px;
height: 217px;
margin: -10px auto;
position: relative;
}
рука
Давайте сначала добавим руку маленького медвежонка, а окончательную позицию можно точно настроить.
/*左侧胳膊*/
.body .armLeft {
width: 53px;
height: 150px;
background-color: #e1b79b;
border: 2px solid #a57662;
border-radius: 50% 50%/60% 30%;
transform: rotate(10deg);
left: 6px;
position: absolute;
}
/*右侧胳膊*/
.body .armRight {
width: 53px;
height: 150px;
background-color: #e1b79b;
border: 2px solid #a57662;
border-radius: 50% 50%/60% 30%;
transform: rotate(-14deg);
position: absolute;
right: 6px;
}
брюшная полость
После рисования рук мы можем нарисовать медвежонка с пухлым животиком.
Точка знания приближается, живот, нарисованный здесь, немного напоминает форму яйца, на самом деле он все еще использует радиус границы: 50% 50% 50% 50% / 70% 70% 30% 30%; Это свойство установите, изменив размер радиуса, чтобы получить рисунок в форме яйца.
Я, возможно, пропустил предложение раньше, большинство наших элементов позиционируются на основе position: absolute, потому что этот атрибут может установить уровень, облегчающий покрытие нашего шаблона. Живот здесь должен быть установлен на более высоком уровне, чтобы покрыть рисунок руки, нарисованный ранее.
/*肚子*/
.body .tummy {
width: 144px;
height: 200px;
background-color: #e1b79b;
position: absolute;
left: 50%;
transform: translate(-50%,0);
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
margin-top: -30px;
border: 2px solid #a57662;
}
живот узор
На животе Xiaoduxiong также есть небольшой узор, мы можем просто добавить его и скрыть.
/*肚子图案*/
.body .tummyCon {
width: 83px;
height: 90px;
background-color: #f7f9e5;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
position: absolute;
top: 60px;
left: 50%;
transform: translate(-50%, 0);
}
нога
После того, как нарисовали живот, давайте нарисуем ноги.С ногами не так уж много сложностей, просто обратите внимание на радианы рамы и ступни.
/*左腿*/
.body .legLeft {
width: 53px;
height: 100px;
background-color: #e1b79b;
position: absolute;
bottom: 0px;
left: 30px;
border: 2px solid #a57662;
border-color: transparent transparent #a57662 #a57662;
border-radius: 50% 50% 50% 50%/0 0 10% 50%;
}
/*右腿*/
.body .legRight {
width: 53px;
height: 100px;
background-color: #e1b79b;
position: absolute;
bottom: 0px;
right: 30px;
border: 2px solid #a57662;
border-color: transparent #a57662 #a57662 transparent;
border-radius: 50% 50% 50% 50%/0 0 50% 10%;
}
Вспомогательные элементы
На этом этапе мы нарисовали все основные элементы, и цвет фона контейнера тела можно удалить, а также нужно нарисовать некоторые вспомогательные элементы, чтобы наш медвежонок выглядел лучше.
Мы собираемся добавить шею медвежонку, чтобы скрыть линии тела.
Добавьте кривую к животу, чтобы сделать живот и ноги более трехмерными.
Последнее, что нужно сделать, это использовать вспомогательные линии, чтобы показать ноги.
После выполнения этих действий наш медвежонок в целом готов.
/*脖子遮盖*/
.body .neck {
width: 120px;
height: 30px;
background-color: #e1b79b;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
/*肚子辅助线*/
.body .arc {
border-bottom: 2px solid #511313;
position: absolute;
top: 70px;
left: 50%;
transform: translate(-50%, 0);
width: 100px;
height: 100px;
border: solid 2px #a57662;
border-color: transparent transparent #a57662 transparent;
border-radius: 50%/ 0 0 30% 30%;
}
/*左脚辅助线*/
.body .arcLeft {
border-bottom: 2px solid #511313;
position: absolute;
bottom: -30px;
left: 43px;
width: 35px;
height: 50px;
border: solid 2px #a57662;
border-color: #a57662 transparent transparent transparent;
border-radius: 50%/ 20% 20% 0 0;
}
/*右脚辅助线*/
.body .arcRight {
border-bottom: 2px solid #511313;
position: absolute;
bottom: -30px;
right: 43px;
width: 35px;
height: 50px;
border: solid 2px #a57662;
border-color: #a57662 transparent transparent transparent;
border-radius: 50%/ 20% 20% 0 0;
}
тень
Последний шаг — добавить тень к ногам Сяодукюн, и мы закончили.
/*阴影*/
.shaodw {
width: 217px;
height: 39px;
background-color: #e9ecee;
margin: -20px auto;
border-radius: 50%/50%;
}
Суммировать
Ключом к рисованию Xiaoduxiong является анализ макета и использование свойств CSS border-radius и transform: rotate.
Для получения более интересных статей, пожалуйста, обратите внимание на публичный аккаунт [front-end] (qianduan_web)