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

1. Фиксированное нижнее содержимое

Это очень распространенная схема, но более распространенная проблема для новичков.

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

До CSS3 добиться этого эффекта было довольно сложно. Высота окна браузера будет меняться в зависимости от ситуации, когда разные пользователи открывают браузер, разницы в размере экрана и степени масштабирования браузера. Нам нужно использовать JavaScript, чтобы получить высоту браузера в режиме реального времени для расчета. Хотя в заголовке сказано «исправить» дно, желаемого эффекта нет.position: fixed. При фиксированном позиционировании, когда контент выше высоты окна, он будет блокировать наш контент.

С появлением CSS3 идеальный способ сделать это — использоватьFlexbox. Ключом к реализации является использование меньшего вниманияflex-growатрибуты, которые можно найти в наших элементах тега контента (например,div) используется. используется в нашем примере нижеmainЭтикетка.

Поясню принцип реализации.

flew-growОн используется для управления расширяемым пространством гибкого элемента относительно его гибкого элемента того же уровня. если мы используемflex-grow: 0, гибкий элемент вообще не будет расширяться. Поэтому нам нужно установить элемент тега содержимого между головой и низом наflex-grow: 1илиflex-grow: auto, поэтому раздел содержимого автоматически заполняет все пространство, кроме верхнего и нижнего.

Чтобы предотвратить влияние на нижнее содержимое пространства расширения части содержимого, мы даемfooterнижний элементflex-shrink: 0Атрибуты.flex-shrinkроль иflex-growНаоборот, он используется для управления пространством усадки гибких элементов, здесь мы даемflex-shrink: 0только для днаfooterразмер не влияет.

Давайте перейдем непосредственно к коду HTML и CSS, чтобы увидеть, как это реализовано.

HTML

<div id="document">
	<nav>
		<h1>头部内容</h1>
	</nav>
	<main>
		<p>可以添加更多内容看看底部的变化哦！</p>
	</main>
	<footer>
		<h1>底部内容</h1>
	</footer>
</div>

#document {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #202020;
    font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}

nav, footer {
    background: #494949;
    display: flex;
    justify-content: center;
}

main {
    color: #bdbdbd;
    flex: auto;
}

footer {
    flex-shrink: 0;
}

* {
    margin: 0;
}

h1,
p {
    padding: 15px;
}

nav > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}

footer > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}

🌟Резюме очков знаний:

flex-grow--- используется для управления расширяемым пространством flex-элемента относительно его flex-элемента на том же уровне

flex-shrink--- Функция иflex-growНаоборот, он используется для контроля пространства усадки гибких элементов.

Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

2. Наведите курсор, чтобы увеличить эффект изображения.

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

На самом деле такого эффекта добиться очень просто. Сначала нам нуженdivзавернуть этоimgМетка, этот слой обертки используется для блокировки изображения. Когда изображение увеличивается, не будет казаться, что изображение превышает ширину и высоту, которые мы оговариваем.

Сначала поговоримdivобернутое свойство, нам нужно дать ему фиксированноеwidthКуандаheightвысокий. Затем мы должны дать этому элементуoverflow: hiddenАтрибуты. Сделайте так, чтобы изображение не превышало это при увеличенииdivШирина и высота элемента. С помощью этого слоя-оболочки мы можем написатьimgразличных эффектов.

В моем примере я использовалtransform: scale(1,1)В качестве эффекта изображения при наведении этоtransformиспользуется для изменения свойств любого элемента, затемscaleОн используется для увеличения (целое число увеличивает) или уменьшает (отрицательное число уменьшает) элемент.

Давайте посмотрим код выше:

поместить в тело html

<div class="img-wrapper">
  <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>

.img-wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 400px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}

Если вы хотите сделать изображение более крутым, вы можете добавить атрибут фильтра изображенияfilter, сделайте изображение серым или темно-коричневым, а затем покажите более крутое изменение цвета при наведении курсора. Свойства поседенияfilter: grayscale(100%);, то свойство сепии равноfilter: sepia(100%). На самом деле атрибутов фильтров для картинок много, если интересно, можете попробовать!

Код для добавления спецэффектов выглядит следующим образом:

HTML

<!-- 灰度过滤 -->
<div class="img-wrapper">
  <img
    class="grayscale-img"
    src="https://img-blog.csdnimg.cn/2020032211021728.png"
  />
</div>

<!-- 深褐色过滤 -->
<div class="img-wrapper">
  <img
    class="sepia-img"
    src="https://img-blog.csdnimg.cn/2020032122230564.png"
  />
</div>

/* ============== 
* 灰度过滤 
* ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== 
* 深褐色过滤
* ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

🌟Сводка знаний

transform--- для смены элементов

scale--- Увеличение и уменьшение элементов

filter--- Фильтр изображения

grayscale--- Фильтр оттенков серого

sepia--- темно-коричневый фильтр

Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

3. Мгновенный темный режим

В последнее время WeChat не может избежать прихода темного века, и многие веб-страницы сделали совместимость и тему темного режима. Если веб-сайт, над которым мы работаем, хочет мгновенно реализовать темный режим, как это можно реализовать?

На самом деле есть быстрый способ, мы можем использоватьinvertиhue-rotateРеализованы два фильтра CSS3.

filter: invert()- От0прибыть1масштаб,1это от белого до черного.filter: hue-rotate()— Используется для изменения цвета ваших элементов при сохранении более или менее той же цветовой палитры. Значение этого свойства может быть изменено с0degприбыть360deg.

на нашей страницеbodyДобавив эти два атрибута в тег, мы можем быстро попытаться перевести наш сайт в «темный режим». Здесь следует отметить, что еслиbodyиhtmlнет настроек наbackgroundЦвет фона, этот фильтр не подойдет.

Код CSS выглядит следующим образом:

html {
  background: #fff;
}

body {
  background: #fff;
  filter: invert(1) hue-rotate(270deg);
}

добиться эффектаЗдесь мы обнаружим, что будет затронут цвет изображения, он не очень красивый, и темный режим не может быть идеально переключен с помощью фильтров css. Но с помощью JavaScript вы можете идеально переключать темный режим.

Недавно появился вспомогательный плагин JavaScript под названиемDarkmode.js.

🌓 Darkmode.js

фактическиDarkmode.jsЭто также функция в css, называемаяmix-blend-mode— «Свойства CSS описывают, как содержимое элемента должно сочетаться с содержимым непосредственного родителя элемента и фоном элемента». С помощью Javascript можно судить, какие элементы на странице нужно затемнять, а какие нет. Он будет думать о нашем предыдущем подходе, который повлияет на другие элементы, которые не нужно затемнять, например изображения, и вызовет проблемы с цветом.

использоватьDarkmode.jsЭто очень просто, просто добавьте следующий код в скрипт, чтобы сразу добавить плагин,

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
  // 这些是这个插件的可配置项：
  var options = {
    bottom: "32px", // 定位底部距离 - 默认: '32px'
    right: "32px", // 定位右边距离 - 默认: '32px'
    left: "unset", // 定位左边距离 - 默认: 'unset'
    time: "0.5s", // 默认动画时间: '0.3s'
    mixColor: "#fff", // 需要改变的颜色 - 默认: '#fff'
    backgroundColor: "#fff", // 背景颜色 - 默认: '#fff'
    buttonColorDark: "#262728", // 黑暗模式下按钮颜色 - 默认: '#100f2c'
    buttonColorLight: "#fff", // 日间模式下按钮颜色 - 默认: '#fff'
    saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true,
    label: "🌓", // 切换模式按钮图标 - 默认: ''
    autoMatchOsTheme: true // 是否自动根据系统适应模式 - 默认: true
  };

  let darkmode = new Darkmode(options);
  darkmode.showWidget();
</script>

Если вы не хотите использовать кнопку по умолчанию этого плагина, вы можете управлять ею в своем коде JavaScript. мы можем пройти.toggle()способ переключения режимов, пока вы можете использовать.isActivated()чтобы определить, был ли введен темный режим.

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // 如果已经进入黑暗模式会返回 true

🌟Сводка знаний

filter: invert()— Вы можете перевернуть страницу с белой на черную или с черной на белую.

filter: hue-rotate()— Используется для изменения цвета ваших элементов при сохранении более или менее той же цветовой палитры.

Darkmode.js- Мгновенный темный режим.

Инвертировать темный режим:Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибоТемный режим Darkmode.js:Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

4. Пользовательские символы списка

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

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

В моем примере я сделал два списка задач, один для отложенных задач и один для завершенных задач, каждый с разными символами списка и цветом.

Принцип реализации

Во-первых, мы отключилиulстиль символа по умолчанию дляlist-style: none

Во-вторых, вliиз:beforeдано на псевдоэлементахcontentЗначение содержимого, используемое отложенными задачами🗹, задача выполненаli.completed:beforeиспользовать✔

3. Чтобы красивее показать эффект, я дал их отдельноliиli .completedдва разных цвета

Давайте посмотрим, как реализован приведенный выше код:

HTML

<div>
  <h2>待处理</h2>
  <ul>
    <li>待办任务1</li>
    <li>待办任务2</li>
    <li>待办任务3</li>
    <li>待办任务4</li>
    <li>待办任务5</li>
  </ul>
</div>
<div>
  <h2>已完成</h2>
  <ul>
    <li class="completed">完成任务1</li>
    <li class="completed">完成任务2</li>
    <li class="completed">完成任务3</li>
  </ul>
</div>

CSS

ul {
  list-style: none;
  color: #fff;
  font-size: 20px;
  border: 3px solid #000;
  padding: 1rem 2rem;
  min-height: 200px;
  margin: 15px 2rem 0 0;
  background: #323232;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
}

li {
  padding: 0.3rem 0;
}

li::before {
  content: "🗹 ";
  color: aqua;
}

li.completed::before {
  content: "✔ ";
  text-decoration: none;
  color: greenyellow;
}

li.completed {
  text-decoration: line-through;
  color: #bdbdbd;
}

::beforeи::afterПсевдоэлемент плюсcontentАтрибуты можно использовать для создания многих специальных эффектов, и они также часто используются как «магия» в современной интерфейсной типографике. Когда дело доходит до использования псевдоэлементов, позвольте мне рассказать вам о более распространенном сценарии использования.

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

реализовать логику

1. Эта навигация содержит 3aэтикетка, сначала дайте каждомуaтег добавляет псевдоэлемент::after, затем вcontentвставка атрибута /символ.

Во-вторых, затем используйтеa:first-child, этот псевдокласс выберет первыйaтег, затем используйтеcontentобъединение атрибутов»символ.

В-третьих, потому что наш первый шаг в каждомaвставляется после метки /символ, поэтому нам нужен последнийaЭтикетка очищается. Здесь мы используем:last-childвыбирать до последнегоaметка, затем используйтеcontent: " "Атрибут очищает содержимое псевдокласса.

HTML

<div class="breadcrumb">
  <a>三钻</a>
  <a>前端</a>
  <a>教程</a>
</div>

CSS

.breadcrumb {
  font-size: 1.6rem;
  color: #fff;
}
.breadcrumb a:first-child {
  color: #82fcfd;
}
.breadcrumb a:first-child::before {
  content: " » ";
}
.breadcrumb a::after {
  content: " /";
  color: #ef6eae;
}
.breadcrumb a:last-child::after {
  content: "";
}

🌟Сводка знаний

::before | ::after— Псевдоэлементы используются для добавления спецэффектов к определенным селекторам.

content— Свойство CSS для вставки содержимого в псевдоэлементы ::before и ::after элемента. Содержимое, вставленное с использованием атрибута содержимого, является анонимным заменяемым элементом.

:first-child— Псевдокласс CSS представляет первый элемент в группе родственных элементов.

:last-child— Псевдокласс CSS представляет последний дочерний элемент родительского элемента.

Пользовательский неупорядоченный список:Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибоПанировочные сухари:Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

5. Эффект параллакса изображения

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

Используйте только CSS

Вы правы, этого эффекта можно легко добиться с помощью одного лишь CSS! Мы просто используем свойство CSS background-image.background-attachment: fixed, который фиксирует фон относительно окна просмотра. Даже если у элемента есть механизм прокрутки, фон не будет прокручиваться вместе с содержимым элемента.

Теория реализации:

1. Добавить к элементу, содержащему изображениеbackground: url()иbackground-size: cover(Второй атрибут подходит для определения картинки в качестве обложки, которая может автоматически регулировать размер картинки и отображать полную картинку на большом экране)

Во-вторых, затем прикрепите атрибуты фиксированного фонового изображенияbackground-attachment: fixed

3. Наконец, добавьте высоту к этому элементуheight: 100%или любая высотаheight: 400px

Это так просто! Не сомневайтесь, сразу кладите на него код, и каждый сможет попробовать сам!

HTML

<div class="wrapper">
   <div class="parallax-img"></div>
   <p>这里填写一堆文字就可以了，尽量多一点哦</p>
</div>

CSS

.wrapper {
  height: 100wh;
}
.parallax-img {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
  font-size: 20px;
  padding: 1.5rem 3rem;
  min-height: 1000px; // 当你的文字内容不够，也能撑出足够的高度来看到效果，当然如果你文字足够多，就不需要了
}

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

🌟Сводка знаний

background-attachment: fixed— Фикс фона относительно области просмотра. Даже если у элемента есть механизм прокрутки, фон не будет прокручиваться вместе с содержимым элемента.

background-size: cover- Размер изображения можно настроить автоматически, и полное изображение будет отображаться на большом экране.

Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

Используйте CSS + JavaScript

Некоторую детскую обувь это может не шокировать или все же считать, что это недостаточно увлекательно. Тогда давайте возьмем еще один расширенный пример.В приведенном выше примере изображение фиксируется при скольжении. Если мы добавим помощь JavaScript, мы можем заставить изображение окна медленно скользить по странице, делая эффект более динамичным и эффектным.

теория реализацииДавайте сначала поговорим о типографике, потому что нам нужно использовать JavaScript для смещения изображения при скольжении страницы, поэтому нам нужно присвоить изображению свойство CSS, чтобы мы могли заставить изображение двигаться вверх или вниз в зависимости от скорости. В этом примере мы оборачиваем все изображения вdivв,classназванныйblock. этоdivДайте атрибуты относительного позиционированияposition: relative, в это время мы можем добавить картинку внутрь, а затем сделать картинку абсолютно позиционированнойposition: absoluteна этоdivвнутри коробки.

Но изображение может быть очень большим, нам нужно, чтобы изображение не выходило за рамки, которые мы определяем, поэтому нашdivтакже даноoverflow: hiddenи высотаheight: 100%. Эта картина превосходитdivКоробка будет скрыта.

Код макета выглядит следующим образом:

<div class="block">
  <img
    src="https://unsplash.it/1920/1920/?image=1005"
    data-speed="-1"
    class="img-parallax"
  />
  <h2>视差速度 -1</h2>
</div>
<div class="block">
  <img
    src="https://unsplash.it/1920/1920/?image=1067"
    data-speed="1"
    class="img-parallax"
  />
  <h2>视差速度 1</h2>
</div>

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Amatic SC', cursive;
}
.block{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none
}

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

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 循环获取每一个图片元素
$(".img-parallax").each(function () {
  var img = $(this);
  var imgParent = $(this).parent();
  function parallaxImg() {
    var speed = img.data("speed"); // 获取每张图片设置了的偏移速度
    var imgY = imgParent.offset().top; // 获取图片盒子所在的Y位置
    var winY = $(this).scrollTop(); // 获取当前滑动到的位置
    var winH = $(this).height(); // 获取浏览器窗口高度
    var parentH = imgParent.innerHeight(); // 获取图片盒子的内高度

    // 浏览器窗口底部的所在位置
    var winBottom = winY + winH; 

    // 当前图片是否进入浏览器窗口
    if (winBottom > imgY && winY < imgY + parentH) {
      // 运算图片需要开始移动的位置
      var imgBottom = (winBottom - imgY) * speed;
      // 运算出图片需要停止移动的位置
      var imgTop = winH + parentH;
      // 获取从开始移动到结束移动的%（根据开始与结束像素 + 移动速度）
      var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50);
    }
    img.css({
      top: imgPercent + "%",
      transform: "translate(-50%, -" + imgPercent + "%)",
    });
  }
  $(document).on({
    scroll: function () {
      parallaxImg();
    },
    ready: function () {
      parallaxImg();
    },
  });
});
</script>

🌟Сводка знаний

position: relative— Относительное позиционирование.

position: absolute— Абсолютное позиционирование.

overflow: hidden— При необходимости содержимое будет обрезано по размеру поля заполнения. Полосы прокрутки не предусмотрены.

Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

6. Анимация обрезанного изображения

Обрезать изображения до CSS3 тоже было довольно сложно. Теперь у нас есть два очень удобных и простых свойства CSS3 для отсечения:object-fitиobject-position, Эти два свойства позволяют нам изменять размер изображения, но не влияют на соотношение сторон изображения.

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

Чтобы сделать наш пример проще, мы используем<input type="checkbox">элемент флажка, поэтому мы можем использовать:checkedпсевдоэлемент для запуска эффекта запуска. Так что в этом примере нам вообще не нужна помощь JavaScript.

Принцип реализации:

Сначала задайте картинке ширину и высоту.height: 1080px,width: 1920px.

2. Затем используйте селекторы CSS для блокировки, когдаinputпосле выбораimgМеняется стиль этикетки. При выборе установите новую ширину и высоту для изображения, здесь мы задаем ширину и высоту каждые 500 пикселей:width: 500px,height: 500px.

3. Затем мы добавили эффект перехода и время, чтобы картинка имела анимированный эффект перехода при изменении ширины и высоты:transition: width 2s, height 4s;.

В-четвертых, наконец, добавьтеobject-fit: coverиobject-position: left-topЭти два свойства для сохранения соотношения сторон изображения, и все готово!

Давайте посмотрим на готовый код:

勾选裁剪图片 <input type="checkbox" />
<br />
<img
  src="https://img-blog.csdnimg.cn/2020032122230564.png"
  alt="Random"
/>

input {
  transform: scale(1.5); /* 只是用来放大复选框大小 */
  margin: 10px 5px;
  color: #fff;
}

img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}

/* css选择器锁定复选框被选中时的状态 */
input:checked + br + img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 4s;
}

🌟Сводка знаний

object-fit— Свойство CSS, указывающее, как содержимое заменяемого элемента должно вписываться в блок, определяемый высотой и шириной, которые он использует.

object-position— Используется для переключения выравнивания объекта содержимого замененного элемента в поле элемента.

transition— Переходы могут определять различные эффекты перехода для элемента, когда он переключается между разными состояниями.

Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

7. Режим наложения (Blend)

Если есть студенты, которые использовали Photoshop,blendРежим наложения должен быть вам хорошо знаком, все мы знаем, что режим наложения очень мощный, и это также очень часто используемая функция в p-map. Но представляли ли вы когда-нибудь, что можете использовать его прямо в CSS браузера? Для нас нам не нужно, чтобы дизайнер рисовал нам картинку, и мы также можем реализовать гибридный режим на внешнем интерфейсе.

В CSS мы можем не толькоbackgroundДобавляя режим наложения к фону, мы можем добавить режим наложения к фону любого элемента, так что вы сможете сделать множество эффектов и типографики, о которых раньше и не догадывались.

Чтобы добавить режим наложения к элементу, нам нужно всего лишь использовать свойство CSS.mix-blend-modeВот и все.

Простой принцип реализации:

Сначала нам просто нужно добавить тег заголовка h1.

<h1>混合模式：颜色减淡</h1>

Затем мы даемh1пометить присоединитьсяmix-blend-modeРежим уменьшения цвета вcolor-dodge, но обратите внимание, что нам нужно датьbodyиhtmlдобавить цвет фонаbackground: white, иначе вы обнаружите, что этот эффект не сработает. так какh1Цвет мы не даем, он будет автоматически унаследован от верхнего уровня, а режим наложения — это фильтр для цвета фона, поэтому у тела и html должен быть цвет фона.

h1 {
   mix-blend-mode: color-dodge;
   font-family: yahei;
   font-size: 5rem;
   text-align: center;
   margin: 0; 
   padding: 20vh 200px;
   color: #D1956C;
 }

 html,
 body {
   margin: 0;
   background-color: white;
 }

 body {

   background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }

изменить фоновое изображение иh1Цвет шрифта этикетки может создавать различные спецэффекты.

🌟Сводка знаний

mix-blend-mode— Свойства CSS описывают, как содержимое элемента должно сочетаться с содержимым непосредственного родителя элемента и фоном элемента.

Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

8. Макет водопада

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

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

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

Принцип реализации:

Чтобы получить этот макет, во-первых, нам нужно обернуть все содержимое вdivэлемент внутри, затем дайте этому элементуcolumn-widthиcolumn-gapАтрибуты.

Затем, чтобы предотвратить разделение каких-либо элементов между двумя столбцами, поместитеcolumn-break-inside: avoidдобавляется к каждому элементу.

Волшебство сделано идеально, ноль JavaScript.

Давайте посмотрим на код:

<div class="columns">
  <figure>
    <img src="https://source.unsplash.com/random?city" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?night" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?developer" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?building" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?water" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?coding" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?stars" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?forest" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?girls" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?working" alt="" />
  </figure>
</div>

.columns {
  column-width: 320px;
  column-gap: 15px;
  width: 90%;
  max-width: 1100px;
  margin: 50px auto;
}
.columns figure {
  display: inline-block;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  column-break-inside: avoid;
  border-radius: 8px;
}
.columns figure img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 8px;
}

🌟Сводка знаний

column-width— Свойство CSS предлагает оптимальную ширину столбца. Ширина столбца — это максимальная ширина столбца перед добавлением другого столбца.

column-width— Это свойство CSS используется для установки размера отступа между столбцами элементов.

column-break-inside— Устанавливает или получает информацию о том, поврежден ли объект внутри.

Предварительный просмотр фактического эффекта｜Исходный код на гитхабе｜ Любимая детская обувь 🌟звездочка спасибо

Суммировать

Я надеюсь, что эти 8 советов по интерфейсу и спецэффектам будут полезны всем и более или менее впитают в себя немного новых знаний по интерфейсу. На самом деле, большая часть контента, упомянутого в этой статье, заслуживает изучения. Есть несколько примеров, которые я сделал относительно простыми, но возможности безграничны. Детская обувь, которой нравится передняя часть, давайте продолжим копать глубоко вместе в области передней части, и пусть наша любовь горит бесконечно!

Напоследок хотелось бы рассказать вам о своей любви и отношении к фронтенду.

Оглядываясь назад на внешний интерфейс за последние несколько лет, можно сказать, что разработка действительно прогрессировала как на дрожжах: от внешнего интерфейса, HTML5 + CSS3 для создания страниц H5 до компонентного интерфейса, различные UI-фреймворки летают повсюду. небо.

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

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

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

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

Как разработчик, который любит внешний интерфейс, я по-прежнему настаиваю на верстке и реализации эффектов взаимодействия со страницей в большинстве проектов. Затем используйте UI-фреймворк как вспомогательный, в основном для сокращения быстрой реализации некоторых мелких компонентов и общих компонентов. (Можно сказать, что я программист, который гонится за ассоциацией совершенства и внешнего вида 😂)

Хорошая статья рекомендуется

🔥«Общие ярлыки VSCode | Коллекция продвинутых игроков VSCode, часть 1»--- Таким образом, для хорошего программиста хороший редактор кода может сыграть большую роль и может принести нам много удобства, помощи, эффективности и влияния на процесс разработки. Даже хороший редактор может доставить разработчику больше удовольствия от повседневного программирования.
🔥«Для тех из вас, кто хочет учиться и изучает программирование, 7 преимуществ обучения программированию»--- На самом деле выбор в пользу изучения программирования может изменить вашу жизнь. Возможно, сначала многие люди изучали программирование и записывались на курсы по программированию, чтобы получать более высокую заработную плату или иметь лучшую рабочую среду. В конце концов, если вы будете настойчивы, вы обнаружите, что программирование также принесет нам много личных способностей и улучшений навыков.
🔥«5 правил, которые помогут вам стать лучшим разработчиком»--- Эта статья учит 5 принципам, которые помогут нам стать лучшими разработчиками, умению выделяться среди многих разработчиков и очень поможет нам в нашей технической карьере.
🔥«Использование принципа «Легко адаптировать» для улучшения программирования и написания лучшего кода--- Как начинающие, так и опытные разработчики часто задают вопрос: «Как писать хороший код?» Чтобы знать, как писать хороший код, мы должны сначала узнать, что такое хороший код. У вас должна быть четкая цель, чтобы знать, как ее достичь. «Принцип ETC», упомянутый в «Пути программиста» — принцип легкой адаптации. Этот принцип кажется простым, но чем больше мы о нем думаем, тем больше чувствуем, что он «прост, но не прост».