предисловие
ПредыдущийНемного забавной магии CSS и разметки (часть 1), мы рассказали о некоторых интересных и полезных макетах. Сегодня мы представим некоторые волшебные спецэффекты, созданные с помощью CSS, некоторые из которых могут сэкономить нам много работы.
Наведение мыши делает контент самоокупаемым
Сталкиваясь с этим требованием раньше, мы можем подумать об использовании JS для манипулирования явностью или неявностью контента. Теперь CSS3transitionЭто может помочь нам сделать это проще.
<ul>
<li style="padding-bottom: 20px;">
<div class="head">
列表1
</div>
<div class="body">
列表内容<br>
内容列表内容<br>
内容列表内容<br>
内容
</div>
</li>
<li>
<div class="head">
列表2
</div>
<div class="body">
列表内容<br>
内容列表内容<br>
内容列表内容<br>
内容
</div>
</li>
</ul>
.body {
max-height: 0;
overflow: hidden;
transition: all 1s ease-out;
}
li:hover .body {
max-height: 300px;
transition-timing-function: ease-in;
}
transition: all 1s ease-out;Это сокращение, у перехода есть 4 свойства перехода:transition-property,transition-duration,transition-timing-function,transition-delay.transition-timing-functionОпределяет кривую скорости эффекта скорости, которая имеет следующие условные свойства.
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
Сделать картинку черно-белой
Есть некоторые особые периоды, такие как необходимость летать в полуштате.В общей среде, чтобы выразить молчание, крупные веб-сайты делают ярко окрашенные изображения серыми и темными, а затем восстанавливают первоначальный цвет по истечении этого периода времени.
В прошлом студентов пользовательского интерфейса просили временно поторопиться изменить карту, а затем загрузить обновление, что было проблематично и приводило к пустой трате места на диске. Теперь CSS3filterСвойство (filter) позволяет добиться этого быстрее. Одноклассники UI изменили его, который фактически является фильтром исходного изображения. Итак, это может быть реализовано так:
.header {
background: no-repeat center center;
background-color: #ccc;
background-attachment: scroll;
background-size: cover;
margin-bottom: 0;
background-image: url(xxx.jpg);
filter: grayscale(100%);
}
Эффект без фильтра выглядит следующим образом:
Эффект добавления фильтра:
Есть еще много свойств фильтра, среди которыхblurМожно добиться размытия по Гауссу, аналогичного эффекту матового стекла в IOS7.contrastВы можете настроить контраст изображения.drop-shadowПод изображением будет наложен эффект тени и т. д.
Настроить цвет курсора в поле ввода
Раньше я сталкивался с требованием: общий цвет интерфейса регистрации и входа в систему голубоватый, и даже цвет границы поля ввода голубоватый. Итак, продукт хочет, чтобы цвет поля ввода и курсора были синими.
Удобно задавать цвет текста, но как задать цвет курсора? CSS3caret-colorможет решить эту проблему.
input, textarea {
caret-color: blue;
}
Он работает не только для собственных элементов управления вводом, но и для обычных тегов HTML с набором contenteditable.
Однако с точки зрения совместимости версия Safari для ПК поддерживается, начиная с версии 11.1, а версия wap также поддерживается, начиная с версии 11.4. Конечно, IE еще не поддерживает его.
Отключить выделение текста
В прошлом, если вы не хотели, чтобы люди выбирали контент на вашей странице, вы могли использовать JS для блокировки событий мыши. А теперь всего одна фразаuser-select:none;Стиль можно сделать.
body {
user-select: none; // 页面中的文本不能被选中
}
Совместимость хорошая, кроме IE. В IE 6-9 это можно сделать, добавив JS-код в телоonselectstart="return false;"решать.
И наоборот, для страниц, которые не могут быть выбраны текст, если вы действительно хотите скопировать, есть трюки. Метод очень прост: откройте режим отладки Chrome и введите под консольdocument.body.innerText, вы можете скопировать его после нажатия Enter, хе-хе~
Ширина ячейки контрольной таблицы
При написании собственной таблицы установка ширины непосредственно в ячейке не работает, потому что ширина ячейки регулируется в соответствии с ее содержимым. Однако при использовании компонента el-table element-ui можно установить ширину каждой ячейки. Как это делается?
Откройте отладку и посмотрите на структуру таблицы, вы обнаружите, что в CSS есть свойство:table-layout: fixed;.
Значение по умолчанию table-layout — auto, при фиксированном значении вступает в силу ширина, установленная в ячейке td. Использование простое:
table {
table-layout: fixed;
width: 100%;
}
эффект стримера
Я видел это в одном торговом центре, и наведение мыши имеет эффект стримера. Используйте преобразование CSS3, линейный градиент, переход и другие функции.
<div class="img-light">
<img src="xxx.jpg" width="640" height="384">
</div>
.img-light {
position: relative;
width: 640px;
height: 384px;
}
.img-light::after {
content: "";
height: 100%;
width: 100px;
transform: skewX(-25deg) translateZ(0);
background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3) 50%, hsla(0, 0%, 100%, 0));
position: absolute;
left: -150%;
top: 0;
z-index: 2;
}
.img-light:hover::after {
transition: left 2s ease-in-out;
left: 150%;
}
Прозрачный слой событий
Я столкнулся с ситуацией, когда щелчок по текущему слою не должен вызывать собственное событие, но может вызвать событие слоя ниже, я понимаю эту ситуацию как «прозрачную передачу». То есть сам клик не откликается, что равносильно прямому клику на слой ниже.
с CSS3pointer-eventsРеализация проста:
div {
pointer-events: none;
}
Когда установлено значение none, объяснение MDN заключается в том, что элемент никогда не будет целью событий мыши. Однако событие мыши может указывать на элемент-потомок, когда свойство pointer-events его элемента-потомка указывает другое значение, и в этом случае событие мыши запускает прослушиватель событий родительского элемента во время фазы захвата или всплытия.
Украсить радио и флажок формы
Способ украсить радио и чекбокс видел в блоге.
.radio-beauty-container {
font-size: 0;
$bgc: green;
%common {
padding: 2px;
background-color: $bgc;
background-clip: content-box;
}
.radio-name {
vertical-align: middle;
font-size: 16px;
}
.radio-beauty {
width: 18px;
height: 18px;
box-sizing: border-box;
display: inline-block;
border: 1px solid $bgc;
vertical-align: middle;
margin: 0 15px 0 3px;
border-radius: 50%;
&:hover {
box-shadow: 0 0 7px $bgc;
@extend %common;
}
}
input[type="radio"]:checked+.radio-beauty {
@extend %common;
}
}
Принцип таков:
- Селектор псевдокласса: установлен флажок, указывающий стиль соответствующего элемента управления (переключателя или флажка), когда он выбран.
- Знак плюс + селектор соседнего брата, этот символ указывает, что выбран следующий узел брата
- Комбинируя эти два элемента, вы можете легко контролировать отображение или скрытие следующих элементов или других стилей.
- Используйте метку метки, чтобы контролировать, установлен ли флажок/флажок или нет, атрибут for привязывает соответствующий флажок или флажок, а затем, когда вы щелкаете здесь элемент метки метки, соответствующий флажок/флажок будет выбран или не отмечен.
Суммировать
CSS3 имеет множество интересных функций, которые могут создавать удивительные и крутые эффекты. Здесь я показываю только некоторые спецэффекты, которые показались мне интересными. Если у вас есть специальные эффекты CSS, которые стоит порекомендовать, приглашаем обсудить и поучиться вместе~
Пост продвижение
Трюк с игрой Лилит中高级前端工程师Ла! ! !
ты игралЛегенда о Сяобинбине([Легенда Dota])”? ты игралмеч и дом"Какой?
ты хочешь иУчитель Сюэ ЧжаофэнСтать коллегой? Заинтересованные студенты могутОбратите внимание на следующий публичный аккаунт Add me WeChatДавай поговорим об этом~