предисловие
Любое приложение, которое можно написать на JavaScript, в конечном итоге будет написано на JavaScript. - Закон Этвуда
Все, что можно сделать с помощью CSS, не требует использования JavaScript. — Авторское право
Это зависит от привычек использования студентов. Тем не менее, правильное использование CSS может значительно повысить эффективность разработки, по крайней мере, заменить многие сценарии JavaScript и сократить код JavaScript.
предыдущий постЧто можно сделать с помощью CSS без проблем с JavaScriptУпомянув несколько распространенных сценариев, на этот раз я поделюсь еще несколькими сценариями, в которых вместо JavaScript используется CSS. Надеюсь, вы сможете использовать его в своем ежедневном развитии.
палитра цветов
Палитра цветов — это сценарий частого использования JavaScript. Если вы разрабатываете его самостоятельно, это также очень сложно. Чтобы найти сторонний плагин, вам придется потратить некоторое время на обучение.inputпомеченtypeПоле предоставляетColorТип, это упрощает нам использование палитры цветов, и эта палитра цветов также может подобрать цвет всего рабочего стола компьютера.
<input type="color" value="#0000ff">
img {
height: 100%;
width: 100%;
object-fit: cover;
}
input {
padding: 0;
border: none;
position: absolute;
width: 100%;
height: 100%;
mix-blend-mode: hue; //色相模式
cursor: pointer;
}
Давайте поговорим о добавлении в CSS3 очень интересного свойства --mix-blend-mode, в котором смешиваются китайские вольные переводы слов mix и blend, поэтому дословный перевод этого атрибута — режим микширования.mix-blend-modeИспользуется для режимов наложения между несколькими разными вкладками, на этот раз с использованием той, которая регулирует основной цвет.hueПредставляя собой цветовой режим, его легко понять учащимся, знакомым с PS.mix-blend-modeЕсть и другие режимы, заинтересованные студенты могут ознакомиться с нимиmix-blend-modeдокументация.
карусель
Большинство шаблонных функций карусели — это решения JavaScript. В этой схеме CSS очень много кода, какую схему использовать, зависит от реальной ситуации.
аккордеон
лупа
Я написал статью раньшеЯ хочу построить серию колес - компонент увеличительного стекла Vue3Он написан на vue3.Хотя объем кода невелик, он определенно сложнее, чем CSS.Он включает в себя обработку значений координат, обработку граничных положений и т. д., поэтому схема CSS с увеличительным стеклом все еще является хорошим выбором.
эффект печати
Если вы используете JavaScript для написания анимаций, которые должны использовать таймеры и перехватывать строки.
<h1>Welcome to GuangZhou</h1>
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
h1 {
font: bold 300% Consolas, Monaco, monospace;
border-right: .1em solid black;
width: 16.5em;
width: 21ch;
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: typing 7s steps(21, end),
blink-caret .5s step-end infinite alternate;
}
remмакет
мобильный терминал в прошломremМакет устанавливается по-разному в зависимости от ширины экранаfont-sizeЧтобы добиться адаптации, вы должны использовать JavaScript для его настройки.
Например: с750pxВ качестве эталона используется эскиз проекта, и устанавливается корневой узел.font-size для 100px, только считайDPR для 2 Случай
Схема JavaScript
document.querySelector('html').style.fontSize = `${window.innerWidth / 7.5 }px`;
CSS-схема
html{
font-size: calc(100vw / 750)
}
обрезать текст
Усечение текста также часто используется во внешнем интерфейсе, и я полагаю, что многие студенты уже использовали его. В прошлом он перехватывался через фон, но этот метод легко теряет данные и не способствует SEO, однако благодаря перехвату CSS он гибок и может быть единообразно применен ко всему проекту.
Эта техника в основном используетtext-overflowХотя это новый атрибут CSS3, он имеет хорошую совместимость в основных браузерах.
однострочный усеченный текст
.ellipsis {
display: inline-block;
width: 40px;
white-space: nowrap;
text-overflow :ellipsis;
overflow: hidden;
}
Многострочный усеченный текст
.ellipsis {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
настроитьinputцвет курсора фокуса
Иногда у дизайнеров есть непростые потребности, например, чувствоinputЦвет курсора не может быть унифицирован с общим стилем, в настоящее время мы можем установитьcaret-colorсвойств, отвечающих этому требованию.
<input class="custom" value="光标变成红色啦" />
input.custom {
caret-color: red;
}
липкая навигация
Раньше эту функцию также нужно было использоватьoffsetTopа такжеwindow.scrollYвыносить суждения. Новое в CSS3position:stickyДавайте легко реализуем эту функцию, я считаю, что многие студенты тоже стали использовать это свойство.
Элемент с фиксированным позиционированием будет действовать как относительно позиционированный элемент, пока не достигнет заданной точки в окне просмотра, а затем станет элементом с фиксированным позиционированием. использовать-webkitПрефикс поддерживается до 92% браузеров.
.nav {
position: sticky;
top: 0;
}
Статистика погребенных точек
Когда масштаб веб-сайта или приложения достигает определенного уровня, необходимо проанализировать соответствующие действия пользователей в приложении или статистическом веб-сайте, а также необходимо закопать некоторые точки для подсчета поведения пользователей.
предыдущий постЧто можно сделать с помощью CSS без проблем с JavaScriptКак уже упоминалось, с помощью CSScontentАтрибутыattrЗахват данных, на самом деле, мы также можемcontentДелайте статистику скрытых точек в атрибуте.
.link:active::after {
color: red;
content: url("填写统计的接口");
}
Конечно, этот метод использует относительно простую точку отслеживания событий. Если это сложно, все равно требуется работа с JavaScript.Пользователи могут отключить статистику отслеживания JavaScript через браузер, но нет возможности отключить CSS.
Также используйте этоcontentЕсть также много интересных способов воспроизведения свойств, таких как анимация загрузки на рисунке ниже.
<h1 data-text="玩命加载中...">玩命加载中...</h1>
h1 {
position: relative;
color: rgba(0, 0, 0, .3);
font-size: 5em
}
h1:before {
content: attr(data-text);
position: absolute;
overflow: hidden;
max-width: 7em;
white-space: nowrap;
color: #fff;
animation: loading 8s linear;
}
@keyframes loading {
0% {
max-width: 0;
}
}
Более интересные эффекты прожектора
использоватьclip-pathДля достижения эффекта маски в этом случае значение свойства равноellipse(100px 100px at 0% 50%), первые два параметра — это длина по оси x и высота по оси y эллипса,atСледующие два параметра являются положение оси X и положение оси Y относительно самого элемента.
Примечание. При использовании этого свойства следует обратить внимание на совместимость браузера, например: Safari необходимо добавить префиксы.-webkit-При использовании совместимого префикса обязательно сохраните исходный код CSS (без префикса) и не удаляйте его.
При настройке фона текста по умолчанию элемент уровня блока, в котором расположен текст, закрывает фон.Если вы хотите применить фон только к тексту, аналогично цветовому эффекту, вы можете использовать фоновую маскуbackground-clip: text;
<h1 dot-light="LIZHENWEN">LIZHENWEN</h1>
h1 {
font-size: 9rem;
font-family: Helvetica;
letter-spacing: -.3rem;
color: #333;
position: relative;
}
h1::after {
content: attr(dot-light);
position: absolute;
top: 0;
left: 0;
color: transparent;
clip-path: ellipse(100px 100px at 0% 50%);
animation: SpotLight 5s infinite;
background-size: 150%;
background-position: center center;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes SpotLight {
0% {
clip-path: ellipse(100px 100px at 0% 50%);
}
50% {
clip-path: ellipse(100px 100px at 100% 50%);
}
100% {
clip-path: ellipse(100px 100px at 0% 50%);
}
}
Псевдоэлемент::markerИнтересно, что использование::markerЕго по-прежнему можно динамически изменять, используя это, вы можете просто создавать интересные эффекты при наведении курсора.
li {
color: #000;
transition: .2s all;
}
li:hover {
color: #ff6000;
}
li::marker {
content: '😩';
}
li:hover::marker {
content: '😁';
}
крутой огненный эффект
Увидев этот эффект пламени, должно быть много студентов подумали, что первый план — использовать Three.js для достижения цели, но на самом деле он реализован с помощью CSS. Когда я увидел этот CSS-эффект, я был поражен, освежил свое понимание CSS и почувствовал, что мне нужно снова изучить ритм CSS. Σ(⊙▽⊙"а
Для достижения этого эффекта пламени требуетсяfilter: contrast() а также filter: blur()используются вместе, см.filterЯ считаю, что многие студенты относительно незнакомы. Это новое свойство фильтра в CSS3. Студенты, которые также знакомы с использованием PS, легко поймут этот атрибут.
наконец
Хотя новое поколение CSS может адаптироваться ко многим сценариям, не жадничайте! ! Многие атрибуты все еще находятся в экспериментальной стадии, а совместимость все еще обсуждается, поэтому учащиеся должны использовать их в соответствии с реальной ситуацией. С обновлением и итерацией версии CSS, CSS следующего поколения принесет больше новых функций и предоставит нам больше удобства для разработки.Поживем-увидим.