Я и моя дорогая Родина (используйте CSS, чтобы отпраздновать день рождения Родины)

CSS
  • Автор: Чен Даютоу
  • гитхаб:KRISACHAN

«Моя страна и я на мгновение неразлучны, и куда бы я ни пошел, везде звучит гимн».

Я верю, что все были«Я и моя страна»Эта песня была украдена. Каждый раз, когда Юто слышит эту песню, он всегда будет полон эмоций. Наш великий новый Китай действительно пережил слишком много за последние 70 лет.

Но благодаря неустанным усилиям поколений людей сегодняшний Китай стал могущественным присутствием, которое не могут игнорировать различные страны и даже западные державы.

От славы к унижению

Китай — одна из самых ранних развитых цивилизаций в мире с почти 5000-летней письменной историей.

Когда-то династия Западная Хань открыла Шелковый путь, соединив через шелк различные страны на пути из древней столицы Чанъань в Римскую империю;

Когда-то Чингисхан и его потомки, начиная с 1205 г. н.э., уничтожали последовательно династии Западная Ся и Цзинь, а затем завоевали многие страны в Средней Азии, Западной Азии и Западной Азии, вплоть до реки Дунай в Европе.

Однако с 1840 г.Первая опиумная войнаВначале Китай пережил почти 100 лет унижений.

От Опиумной войны 1840 г. до стадии старой демократической революции накануне Движения четвертого мая 1919 г.

От Движения четвертого мая 1919 г. до этапа новой демократической революции накануне образования Китайской Народной Республики в 1949 г.

Мы прошли через так много.

Делегация из 69 человек, когда-то участвовавшая в Берлинской Олимпиаде 1936 г., была уничтожена армией.«Больной человек из Восточной Азии».就如同下面的GIF一样，残缺，破损。

dybf

Стиль приведенного выше GIF называется «Glitch Effect», который в последнее время стал популярным стилем дизайна. Так как же это достигается?

разделение идей

<style>
    .ge-text {
        position: relative;
        color: #fff;
        font-size: 72px;
        line-height: 1;
        letter-spacing: 0.01em;
        transform: scale3d(1, 1, 1);
        padding: 10px 20px;
        background: linear-gradient(to right, #232526, #414345);
        overflow: hidden;
    }
    .ge-text::before, .ge-text::after {
        content: attr(aria-title);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        background: linear-gradient(to right, #232526, #414345);
        clip-path: inset(79px 50px 43px 0px);
        overflow: hidden;
    }
    .ge-text::before {
        left: 7px;
        animation: glitch-effect 3s infinite linear alternate-reverse;
    }
    .ge-text::after {
        left: 3px;
        animation: glitch-effect 2s infinite linear alternate-reverse;
    }
    @keyframes glitch-effect {
        0% {
          clip-path: inset(4px 50px 61px 0px);
        }
        5% {
          clip-path: inset(99px 50px 30px 0px);
        }
        ...（省略了不同百分比下的的值）
        95% {
          clip-path: inset(7px 50px 59px 0px);
        }
        100% {
          clip-path: inset(79px 50px 43px 0px);
        }
    }
</style>
<div class="glitch-effect">
    <h1 class="ge-text" aria-title="东亚病夫">东亚病夫</h1>
</div>

(Слишком много повторяющихся кодов, поэтому я не буду их все выкладывать, видна конкретная реализацияcodepen)

Глядя на гифку выше, нетрудно обнаружить, что так называемый ветер разлома — это одна и та же фигура, бьющаяся в разных положениях. Это просто биение, плавающее поверх обычной графики, поэтому кажется, что есть ощущение провала объекта LOGO GIF от Douyin как раз такая операция.

Теперь, когда мы это знаем, наш первый шаг — сделать три одинаковых изображения, но в разных положениях.

Я использовал вышеуказанное DEMO::beforeа также::after, Конечно, вы можете использовать только один из повторяющихся графиков, а можете использовать более одного, как вам нравится, это зависит от того, какой отказ вам нравится.

Ядро после этогоclip-path: insetа также@keyframesсотрудничество.

clip-path

clip-pathМожет быть введено или создано мощное свойство, определяющее области отсечения, которое заменяет устаревшееclipАтрибуты также нуждаются в интересных функциях.

В этой статье не ставится задача подробно объяснять это свойство, если вам интересно, вы можете пройтиMDNилиГенератор пути клипа CSSУзнать больше.

clip-path в основном состоит из следующих 4 дополнительных функций:

функция эффект
clip-path: inset( <shape-arg>{1,4} [round <border-radius>]? ) Прямоугольная область для определения обрезки
clip-path: circle( [<shape-radius>]? [at <position>]? ) Круглая область, используемая для определения обрезки
clip-path: ellipse( [<shape-radius>{2}]? [at <position>]? ) Область эллипса, используемая для определения отсечения
clip-path: polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) область полигона, используемая для определения отсечения

Схема ниже предназначена дляclip-path: polygonнарисовано.

clipy

Изображение изГенератор пути клипа CSS

Так как же нам нарисовать наш неисправный ветер?

Сначала давайте посмотрим наclip-path: insetСтатус различных значений.

clipy1

Несколько наборов значений вводятся случайным образом выше.Нетрудно обнаружить, что области, обрезанные разными значениями, различны.В настоящее время, пока мы используем::beforeа также::afterсделать обработку этого изменения, а затем добавить другойleftзначение, это будет иметь верхний эффект.

От слабого к сильному

От больного человека Восточной Азии, до стран БРИК, а затем и до первой тройки стран мира по ВВП;

От поднятия красного флага на церемонии основания до успешного взрыва первой атомной бомбы, до возвращения Гонконга в 1997 году, до Олимпийских игр 2008 года, и теперь Китай пережил слишком многое.

Так часто, когда я слышу национальный гимн и вижу национальный флаг, у меня всегда смешанные чувства в сердце.

Говоря о национальных флагах, почему бы нам не нарисовать пятизвездочный красный флаг с кодом?

особые свойства

Прежде всего, мы должны знать, что национальный флаг представляет собой пятизвездочный красный флаг с красным лицом и соотношением длины и ширины 3:2. Левый верхний украшен пятью желтыми пятиконечными звездами, а справа большой звездой (диаметр описанного круга 3 /10 высоты флага), и каждый из них имеет одну угловую точку, расположенную прямо напротив центральной точки большой звезды.

Существует пять основных размеров:

  1. 288 см в длину и 192 см в высоту;
  2. 240 см в длину и 160 см в высоту;
  3. 192 см в длину и 128 см в высоту;
  4. 144 см в длину и 96 см в высоту;
  5. Длина 96 см, высота 64 см.

Чернильный рисунок флага выглядит следующим образом:

flag

Зная это, мы можем нарисовать пятизвездочный красный флаг в соответствии с приведенным выше соотношением, и эффект будет следующим:

flag

Основная реализация этого эффекта DEMO вдохновлена ​​этой статьей:Интерфейсная реализация серии эффектов развевающихся флагов (Ⅰ): реализация dom+css, вы можете перейти к исходному тексту, если вам интересно.

Код

Так как же реализовать упомянутую выше функцию развевающихся красных флажков?

Сначала давайте посмотрим на псевдокод

<style>
    * {
        margin: 0;
        padding: 0;
    }
    html,
    body {
        height: 100%;
        width: 100%;
    }
    li {
        list-style: none;
    }
    .flag {
        position: absolute;
        left: 50%;
        top: 50%;
        animation: wave ease-in-out infinite;
    }
    .flag > li {
        height: 100%;
        float: left;
        background-image: url("flag.jpg");
        background-size: auto 100%;
        animation: flag ease-in-out infinite;
    }
</style>
<ul id="flag" class="flag"></ul>
<script>
    'use strict'
    const flag = document.querySelector('#flag')
    const image = new Image()
    image.src = 'flag.jpg'
    const flagWidth = 800
    const flagHeight = 640
    let imgWidth = ''
    let imgHeight = ''
     /**
       * @func
       * @name 分割图片
       * @param sliceCount 切片数量
       * @param amplitude 振幅
       * @param period 固定周期个数
       * @param duration 一个周期的时长
       */
    const imgRender = ({
        sliceCount = 70,
        amplitude = 20,
        period = 1.5,
        duration = 2,
    }) => {/* 具体生成红旗DOM片段的逻辑 */}
    image.onload = () => {
        imgWidth = image.width
        imgHeight = image.height
        const ratio = image.width / image.height
        if (imgWidth > flagWidth) {
            imgWidth = flagWidth
            imgHeight = imgWidth / ratio
        }
        if (imgHeight > flagHeight) {
            imgWidth = imgHeight * ratio
            imgHeight = flagHeight
        }
        flag.style.width = imgWidth + 'px'
        flag.style.height = imgHeight + 'px'
        flag.style.marginLeft = -imgWidth / 2 + 'px'
        flag.style.marginTop = -imgHeight / 2 + 'px'
        imgRender({
            sliceCount: 70,
            amplitude: 20,
            period: 1.5,
            duration: 2,
        })
    }
</script>

добавленimgRenderЧто именно он сделал?

если вы знаете, что такоеСпрайт (CSS-спрайт), это должно быть легко понять, вHTTP1в эпоху,Спрайт (CSS-спрайт)Это очень распространенная техническая концепция. Из-за названия перевода ее также называют спрайтом CSS. Это технология слияния изображений CSS. Метод заключается в объединении небольших значков и фоновых изображений в одно изображение, а затем с помощью позиционирования фона CSS. для отображения той части изображения, которая должна быть отображена.

Основной принцип CSS Sprite состоит в том, чтобы объединить несколько изображений, используемых на вашем веб-сайте, в одно изображение, а затем использовать CSS.backgroundа такжеbackground-positionРендеринг атрибутов.

такimgRenderПросто сделайте такую ​​вещь, вырежьте изображение красного флага на равные части, а затем зациклите его, чтобы сгенерироватьsliceCountколичество узлов DOM, затем добавьтеbackground-position, В настоящее времяbackground-positionЗначение связано с зацикленным нижним индексом.Конкретная логика может быть изменена по мере необходимости, а затем конфигурация свойств анимации.

Конкретная реализация может видеть рыбью головуCODEPEN.

Мммм название этой статьи CSS.На самом деле JS тут не используется.Ведь он используется только как скрипт для генерации повторяющегося кода.Основное ядро ​​это Sprite+анимация

SVG-версия красного флага

Мы реализовали CSS-версию пятизвездочного красного флага, теперь давайте реализуем SVG-версию.

Очень просто использовать SVG для обработки некоторых сложных шаблонов, нам нужно только знать путь, мы можем с ним работать.

Конечно, откуда мы знаем путь? Это позволяет нашим дизайнерам пользовательского интерфейса экспортировать SVG из AI или переходить кwww.iconfont.cnМы можем найти его, и тогда мы можем делать то, что хотим.

Если мы хотим нарисовать красный флаг выше, это тоже очень просто.

Код прямо здесь:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="600" viewBox="0 0 30 20">
    <defs>
        <path id="s" d="M0,-1 0.587785,0.809017 -0.951057,-0.309017H0.951057L-0.587785,0.809017z" fill="#ffde00"/>
    </defs>
    <rect width="30" height="20" fill="#de2910"/>
    <use xlink:href="#s" transform="translate(5,5) scale(3)"/>
    <use xlink:href="#s" transform="translate(10,2) rotate(23.036243)"/>
    <use xlink:href="#s" transform="translate(12,4) rotate(45.869898)"/>
    <use xlink:href="#s" transform="translate(12,7) rotate(69.945396)"/>
    <use xlink:href="#s" transform="translate(10,9) rotate(20.659808)"/>
</svg>

Из вышеизложенного нетрудно увидеть, что этому пятизвездочному красному флагу нужно только определить красное полотно, очертание звезды, а затем использовать его для обозначения различных положений.

Эффект следующий:

Hongqi

«Пятизвездочный красный флаг, ты моя гордость, пятизвездочный красный флаг, я горжусь тобой, болею за тебя, благословляю тебя, твое имя важнее моей жизни».

Когда я писал здесь, мозг автоматически трепетал красным флажком. Я желаю Родине стать сильнее и поздравляю всех вас с Национальным праздником.

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95

Категории