«CSS Dafa» использует псевдоэлементы для реализации очень практичной библиотеки иконок (с исходным кодом).

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

Предварительные знания

псевдоэлемент

Псевдоэлемент — это ключевое слово, добавленное в конце селектора, которое позволяет вам стилизовать определенные части выбранного элемента. К псевдоэлементам в основном относятся:

• :: стиль first-letter для первой буквы
• :: стиль первой строки первой строки текста
• ::до добавления украшения в заголовок элемента
• ::after Modification добавляется в конец элемента
• :: стиль заполнителя для ввода заполнителя
• :: стиль выбора выбранного элемента

Лично я считаю, что псевдоэлементы можно интерпретировать как украшение элементов, которое может привносить дополнительные стили к элементам и относиться к дополнительной структуре документа.

псевдокласс

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

• :link
• :visited
• :hover
• :active
• :focus
• :lang(fr)
• :not(s)
• :root
• :first-child
• :last-child
• :only-child
• :nth-child(n)
• :nth-last-child(n)
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type(n)
• :nth-last-of-type(n)
• :empty
• :checked
• :enabled
• :disabled
• :target

Мы можем использовать псевдоклассы и псевдоэлементы CSS для достижения многих мощных визуальных эффектов. Здесь я в основном представляю псевдоэлементы. Если вас интересуют псевдоклассы или другие функции CSS, вы можете ознакомиться с моими предыдущими статьями CSS, которые очень всеобъемлющий:

Используйте css3, чтобы реализовать фоновую анимацию потрясающего интервьюера (расширенный исходный код)

Сводка фактического боя CSS3 (с исходным кодом)

текст

Давайте взглянем на библиотеку иконок, которую мы реализовали на чистом css:

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

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

принцип

Мы понимаем, что приведенные выше значки CSS основаны на псевдоэлементах. Мы можем использовать свойства псевдоэлементов ::before и ::after и content для добавления дополнительных визуальных эффектов к элементам. Мы также представили концепцию и типы псевдоэлементов. элементы выше. Далее Давайте воплотим это в жизнь~

реализовать стрелка

Идея состоит в том, чтобы использовать псевдоэлемент ::before элемента для рисования треугольника, использовать CSS для установки стиля span в виде линии и выполнения позиционирования макета:

// less
.arrow {
    position: relative;
    display: inline-block;
    line-height: 0;
    background-color: #ccc;
    &.arrow-hor {
        width: 16px;
        height: 1px;
    }
    &.arrow-hor.right::before {
        content: '';
        position: absolute;
        top: -4px;
        right: -8px;
        border: 4px solid transparent;
        border-left: 4px solid #ccc;
    }
}

// html
<span class="arrow arrow-hor right"></span>

Таким образом реализуется стрелка, указывающая вправо.Таким же образом мы можем реализовать стрелку влево, стрелку вверх и вниз и двустороннюю стрелку.Нам нужно только добавить псевдокласс ::after и сделать правильное позиционирование.

Реализовать значок поиска

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

// less
.search {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #ccc;
    text-align: center;
    transform: rotate(-45deg);
    &::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 4px;
        background-color: #ccc;
    }
}
// html
<span class="search"></span>

реализовать аватар

Чтобы реализовать аватар, нам нужно использовать псевдоэлементы до и после, чтобы сделать голову и тело персонажа соответственно.Для тела мы будем использовать CSS для рисования эллипса:

// less
.dot-pan {
    position: relative;
    display: inline-flex;
    width: 60px;
    height: 60px;
    line-height: 0;
    align-items: center;
    border-radius: 50%;
    background-color: #06c;
    transform: rotate(-90deg);
    &::before {
        content: '';
        display: inline-block;
        width: 28px;
        height: 40px;
        margin-left: -3px;
        border-radius: 50% 50%;
        flex-shrink: 0;
        background-color: #fff;
    }

    &::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: #fff;
    }
}
// html
<span class="search"></span>

Реализовать значки местоположения

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

// less
.locate-icon {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #06c;
    &::before {
        content: '';
        position: absolute;
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
    }
    &::after {
        content: '';
        margin-top: 45px;
        display: inline-block;
        border: 15px solid transparent;
        border-top-color: #06c;
    }
}
// html
<span class="locate-icon mr-20"></span>

Внедрить значок WeChat

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

// less
.wechat-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(68, 170, 59);
    &::before {
        content: '';
        margin-top: 14px;
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 16px 0 0 #fff;
    }
    &::after {
        content: '';
        margin-top: 42px;
        display: inline-block;
        border-width: 6px 10px 6px 10px;
        border-style: solid;
        border-color: transparent;
        border-top-color: rgb(68, 170, 59);
        transform: rotate(-147deg);
    }
}
// html
<span class="wechat-icon mr-20"></span>

Реализовать значок галочки

Тут тоже все очень просто, ставим галочку в содержимом псевдоэлемента, а потом задаем цвет и размер:

// less
.yes-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background-color: green;
    border-radius: 50%;
    &::after {
        content: '✓';
        color: #fff;
        font-size: 30px;
        font-weight: bold;
    }
}
// html
<span class="yes-icon mr-20"></span>

Реализация глаз (обычно используется для значков трафика веб-сайта)

Главное сделать эллипс плюс круговой псевдоэлемент:

.view-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 36px;
    background-color: #06c;
    border-radius: 50%;
    &::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
    }
}

иконки навигации

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

.gps-icon {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-width: 30px 15px 30px 15px;
    border-color: transparent;
    border-style: solid;
    border-bottom-color: #06c;
    transform: translate(10px, -16px) rotate(32deg);
    &::after {
        position: absolute;
        bottom: -48px;
        content: '';
        display: inline-block;
        border-width: 10px 38px 30px 38px;
        border-color: transparent;
        border-style: solid;
        border-bottom-color: #fff;
    }
}

внедрить значок сердца

Принцип заключается в использовании двух псевдоэлементов для реализации двух эллипсов, а вращение может совпадать:

.logo-x {
    position: relative;
    display: inline-flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(212, 73, 17);
    &::after {
        position: absolute;
        content: '';
        left: 10px;
        top: 12px;
        display: inline-block;
        width: 20px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
        transform: rotate(135deg);
    }
    &::before {
        position: absolute;
        content: '';
        right: 10px;
        top: 12px;
        display: inline-block;
        width: 20px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
        transform: rotate(-135deg);
    }
}

значок PS

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

.logo-ps {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: rgb(15, 102, 184);
    &::before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 50px;
        height: 40px;
        background-color: rgba(255, 255, 255, .1);
    }
    &::after {
        position: absolute;
        content: 'PS';
        font-size: 24px;
        display: inline-block;
        color: #fff;
    }
}

Реализация всплывающего диалогового окна

Похоже на иконку WeChat:

.logo-pp {
    display: inline-block;
    width: 150px;
    height: 50px;
    border-radius: 8px;
    background-color: rgb(68, 170, 59);
    &::before {
        content: '等你下课哦！';
        margin-top: 14px;
        margin-left: -33px;
        position: absolute;
        color: #fff;
    }
    &::after {
        content: '';
        margin-top: 42px;
        display: inline-block;
        border-width: 6px 10px 6px 10px;
        border-style: solid;
        border-color: transparent;
        border-top-color: rgb(68, 170, 59);
        transform: rotate(-147deg) translate(-12px, 6px);
    }
}

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

наконец

Если вы хотите узнать больше о css, javascript, nodeJS и других интерфейсных знаниях и реальных боях, присоединяйтесь к нам в общедоступной учетной записи «Интересный интерфейс», чтобы учиться и обсуждать вместе и исследовать границы интерфейса. вместе.

больше рекомендаций

• Быстро осваивайте новые функции es6+ и основной перечень грамматики es6
• Реализовать проект полного стека CMS от 0 до 1 на основе nodeJS (включено)
• Реализовать проект полного стека CMS от 0 до 1 на основе nodeJS (средний)
• Реализовать проект полного стека CMS от 0 до 1 на основе nodeJS (ниже)
• Сведения о запуске на стороне сервера для реализации проекта полного стека CMS от 0 до 1 на основе nodeJS
• Краткое изложение основных знаний по теме "Продвинутое программирование на JavaScript"
• Используйте css3, чтобы реализовать фоновую анимацию потрясающего интервьюера (расширенный исходный код)
• Вспомните проблему межстраничной связи в старом проекте и фронтальную реализацию функции скачивания файлов
• 5 минут, чтобы научить вас писать фиктивный сервер данных с помощью nodeJS
• Реализация и применение бинарного дерева и бинарного дерева поиска в JavaScript
• Реализация небольшой игры на проигрывателе с помощью JavaScript и C3
• Научу вас использовать 200 строк кода, чтобы написать любовную мини-игру Dou Pin Le H5 (с исходным кодом)
• Изучение и обобщение решений для внешней интеграции на основе экологии react/vue.
• Как написать собственную библиотеку js менее чем из 200 строк кода)
• Картинка, чтобы научить вас быстро играть в vue-cli3
• 3 минуты, чтобы научить вас использовать нативный js для реализации компонента предварительного просмотра загрузки файлов с мониторингом прогресса
• Использование Angular8 и API карты Baidu для разработки «списка туров»
• js реализация базового алгоритма поиска и тест производительности при 1,7 миллионах данных
• Как сделать интерфейсный код в 60 раз быстрее
• Vue advanced advanced series — играйте с vue и vuex с машинописным текстом