Некоторые мощные приемы CSS, о которых вы могли не знать

CSS
Некоторые мощные приемы CSS, о которых вы могли не знать

Введение

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

1 вкладка

онлайн демо

1.1 Стучите по ключевым моментам

  1. такой жеnameатрибутradioОдновременно можно выбрать только одну группу, имитируя переключение панелей.
  2. использоватьradioИмеет фокусируемое свойство, которое имитирует событие щелчка.
  3. пройти черезCSSПроизводный селектор в сочетании сz-indexИерархия для завершения отображения контента и скрытия переключения

1.2 Код ключа

  <div class="tab">
    <input type="radio" id="radio1" name="radiogroup"/>
    <label for="radio1">标签1</label>
    <section>内容1</section>
  </div>
  
  <div class="tab">
    <input type="radio" id="radio2" name="radiogroup"/>
    <label for="radio2">标签2</label>
    <section>内容2</section>
  </div>



#radio1:checked ~ label,#radio2:checked ~ label,#radio3:checked ~ label{
  background:#e67e22;
}

#radio1:checked ~ section,#radio2:checked ~ section,#radio3:checked ~ section{
  z-index:1
}

2 коллапс

онлайн демо

1.1 Стучите по ключевым моментам

  1. использоватьcheckboxФункция множественного выбора для имитации одновременной фокусировки событий
  2. использоватьcheckboxИмеет фокусируемое свойство, которое имитирует событие щелчка.
  3. пройти черезCSSПолучите селектор для преобразования высоты содержимого, чтобы завершить эффект свертывания панели

1.2 Код ключа

  <input type="checkbox" id="checkbox1" class="checkbox-common"/>
  <label for="checkbox1" class="panel-title">面板1</label>
  <section class="panel-content" id="content1">内容1</section>

#checkbox1:checked ~ #content1,#checkbox2:checked ~ #content2,#checkbox3:checked ~ #content3{
  height:100px;
}

3 диалоговое окно (модальное окно)

онлайн демо

3.1 Стучите по ключевым моментам

  1. Обнаружение элемента через точку прицеливания тега,hrefа такжеidПоследовательный, имитирует щелчок
  2. пройти через:targetСелектор находит модальный элемент и переключает отображение и скрытие.

3.2 Код ключа

<a href="#dialog" class="dialog-btn">click me</a>
<div class="dialog-box" id="dialog">
  <div class="dialog-con">
    <a href="#" class="dialog-close">X</a>
    content
  </div>
</div>

.dialog-box:target{
  visibility:visible
}

4 лайтбокса (превью изображения)

онлайн демо

4.1 Стучите по ключевым моментам

  1. Обнаружение элемента через точку прицеливания тега,hrefа такжеidПоследовательный, имитирует щелчок
  2. пройти через:targetСелектор позиционирование Большой дисплей изображения

4.2 Код ключа

<div class="light-box">
  <a href="#img1"><img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png?w=100&h=100" alt=""></a>
  
  <a href="#" id="img1" class="lightbox">
    <img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png" alt="">
  </a>
  
</div>

.lightbox{
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,1);
  right:0;
  bottom:0;
  text-align:center;
  display:none;
  z-index:999;
}
.lightbox:target{
  display:block;
}

5 всплывающая подсказка (текстовая подсказка)

онлайн демо

5.1 Стучите по ключевым моментам

  1. использоватьhtmlпользовательские свойстваdata-attrдля хранения содержимого подсказки
  2. пройти черезattr(data-attr)получить подсказки и пройтиhoverдля отображения текстовой подсказки

5.2 Код ключа

<p class="poem">昼短<span data-tip="痛苦难熬的夜晚" class="tooltip" href="" tabindex="0">苦夜</span>长，何不<span href=""class="tooltip" data-tip="一起夜晚游玩" tabindex="0">秉夜</span>游</p>

.tooltip:before{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:120%;
  display:block;
  padding:.5em;
  width:150px;
  transform:translateX(-50%);
  background:#7d5fff;
  color:#fff;
  opacity:0;
  text-align:center;
  outline:none;
}

6 индикатор (прогресс чтения)

онлайн демо

6.1 Стучите по ключевым моментам

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

6.2 Код ключа

body{	
	background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
	background-size: 100% calc(100% - 100vh + 129px);
	background-repeat: no-repeat;
}

7 Резюме (Сводка)

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

Ссылка на ссылку:

Категории