Верните радость детства с помощью CSS, Дораэмон будет сопровождать вас

CSS
Верните радость детства с помощью CSS, Дораэмон будет сопровождать вас

предисловие

Когда я был маленьким, я думал, как здорово было бы иметь такого друга, как Дораэмон, который сопровождал бы нас, пока мы росли? Когда тебе грустно, кто-то утешает, когда хочешь сдаться, кто-то подбадривает, когда ты счастлив, кто-то разделяет. Самое главное, что у него есть всемогущий магический карман. Теперь, когда я вырос, в свою очередь, я надеюсь, что смогу сопровождать своих детей, чтобы они росли, как Дораэмон. Итак, в качестве подарка нам на День защиты детей, давайте нарисуем плакат «Дораэмон, иди с тобой» с помощью CSS и давайте вместе вспомним наши детские воспоминания.

Связанные очки знаний

Первое, о чем думает большинство людей, умеющих рисовать картинки в CSS, этоcanvas, но есть еще один API, который нельзя недооценивать. Это то, что вы можете использовать для рисования кривыхborder-radius. Далее, давайте сначала разберемся с основным использованием соответствующих точек знаний.

border-radius

border-radiusПозволяет задать внешнюю границу элемента со скругленными углами. Определяет круг при использовании одного радиуса и эллипс при использовании двух радиусов. Пересечение этого круга (эллипса) и границы создает эффект закругленного угла.

border-radius-sh.pngМы часто используем только одно значение атрибута во время разработки, напримерborder-radius: 10px;Учащиеся, знакомые с этим атрибутом, должны знать, что на самом деле это сокращение, похожее наpadding: 10px;На самом деле у него будет радиус двух измерений, одного горизонтального и одного вертикального. ** Его полное письмоborder-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; /Первые четыре значения — это горизонтальные радиусы соответствующих четырех углов по часовой стрелке, сначала верхний левый угол, а затем вертикальные радиусы. Сказав так много, давайте сделаем несколько практических упражнений и попробуем нарисовать глазницу Дораэмона. Фокусborder-radius,htmlчасть в основномdivНе показывать их по одному.

.eye {
    position: absolute;
    top: 38px;
    width: 136px;
    height: 136px;
    border-radius: 100px 60px 100px 70px / 100px 60px 100px 70px;
    border: 2px solid #7f888f;
    background: #fff;
}

Установите соответствующие горизонтальные и вертикальные радиусы для четырех углов соответственно.Окончательный эффект выглядит следующим образом:

image.png

Кроме того, лицо Дораэмона совершенно особенное Я использовал два полукруга, которые перекрывали друг друга, чтобы заблокировать лишние части, и, наконец, показал этот эффект.

<div class='doraemon'>
  <!-- 脸部 -->
  <div class='header'></div>
  <div class='face'></div>
</div>

.doraemon {
    width: 100%;
    height: 350px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    background: #5087b8;
    width: 700px;
    height: 350px;
    border-radius: 350px 350px 0 0 / 350px 350px 0 0;
}

.face {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    width: 600px;
    height: 250px;
    background: #fff;
    border-radius: 300px 300px 0 / 225px 225px 0 0;
}

image.png

rotate()

rotate()Функция определяет способ переноса элементов вокруг фиксированной точки (путемtransform-originзаданное свойство, по умолчанию центр элемента) преобразование, которое вращается без искажений. Указанный угол определяет величину поворота. Если угол положительный, поверните по часовой стрелке, в противном случае поверните против часовой стрелки. Поворот на 180° также известен как точечное отражение.

Как следует из названия, он используется для угла поворота, который также делится наrotateY(),rotateX()作用是让一个元素围绕纵坐标(垂直轴、水平轴)旋转，而不会对其进行变形。 ​

Поскольку лицо Дораэмона относительно симметрично, то есть синее, круглое, толстое лицо, мы можем легко нарисовать другую глазницу через этот API (для ленивых есть много способов быть ленивыми). Точно так же нарисуйте его кошачьи усы.

<div class='eye eye-left'>
  <div class='pupil'>
    <div class='pupil-mask'></div>
    <div class='pupil-middle'></div>
    <div class='pupil-small'></div>
    <div class='tear-top'></div>
    <div class='tear-bottom'></div>
  </div>
</div>
<div class='eye eye-right mirror'>
  <div class='pupil mirror'>
    <div class='pupil-mask'></div>
    <div class='pupil-middle'></div>
    <div class='pupil-small'></div>
    <div class='tear-top'></div>
    <div class='tear-bottom'></div>
  </div>
</div>

.eye {
    position: absolute;
    top: 38px;
    width: 136px;
    height: 136px;
    border-radius: 100px 60px 100px 70px / 100px 60px 100px 70px;
    border: 2px solid #7f888f;
    background: #fff;
}

.eye.eye-left {
    left: 104px;
}

.eye.eye-right {
    right: 104px;
}

.mirror {
    transform: rotateY(180deg);     // 水平翻转
}

image.png

box-shadow

box-shadow** Свойство используется для добавления эффекта тени к рамке элемента. Вы можете установить несколько эффектов тени для одного и того же элемента, разделив их запятыми. Значения, которые можно установить для этого свойства, включаютСмещение по оси X, смещение по оси Y, радиус размытия, радиус диффузии и цвет** тени.

Нос Дораэмона на постере получился трехмерным, на этот раз он должен бытьbox-shadowДа ладно, на самом деле, пока вы знаете, что представляет собой соответствующее значение, проблема будет решена.Давайте рассмотрим простой пример использования.

/* 依次对应的值为 x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Ну, это выглядит очень просто и понятно с первого взгляда, тогда давайте начнем рисовать его нос.

<div class='nose'>
  <div class='blink'></div>
</div>

.nose {
    position: absolute;
    top: 127px;
    left: 50%;
    transform: translate(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ae3537;
    box-shadow: 2px 30px 18px -8px rgb(0 0 0 / 33%);
}

/* 鼻子上的光 */
.nose .blink {
    position: absolute;
    top: 5px;
    left: 20px;
    width: 36px;
    height: 22px;
    background: #bf5d5c;
    border-radius: 80px 30px 44px 20px / 60px 30px 60px 20px;
}

image.png

Призвать Дораэмона

Наконец, настал самый ответственный момент, сращивание всех частей воедино. Решение за тобой, выходи, Дораэмон.doraemon.gifЯ вставил полный кодCode PenНа, студенты, которые заинтересованы, могут взглянуть.

заключительные замечания

Нобита и Шизука наконец-то вместе, почему ты до сих пор один (я имею в виду Дораэмона, хахаха)? На самом деле в реальной жизни есть много Дораэмонов Любить свою семью, помогать своим друзьям, просвещать своего учителя и направлять своего босса — все это Дораэмоны в нашей жизни. Наконец, я поздравляю всех с Днем защиты детей!

Категории