Эта статья покажет вам, как использовать HTML5/CSS3 для создания HTML -страницы с липкими заметками всего за 5 шагов. Рендеринги следующие:
(Примечание: текст на картинке является чисто изготовленным и забавным. Если есть какое -либо сходство, это просто совпадение, спасибо!)
Примечание: этот эффект можно увидеть в сафари, хроме, Firefox и Opera. Поскольку поддержка HTML5 не завершена в IE, эффект не может быть замечен.
Шаг 1: Создайте основные HTML и квадраты
Сначала добавьте основную структуру HTML и создайте базовый квадрат, код следующим образом:
<ul>
<li> <a href = "#">
<h2> dudu: </h2>
<p> Почему в последнее время не было красивых постов? Я обязательно дам рекомендацию заголовка, рекомендую! Рекомендую! </P>
</a> </li>
<li> <a href = "#">
<h2> дядя Том: </h2>
<p> Член команды отправился в Microsoft, чтобы сделать SDE3, и ему пришлось снова нанять нового участника </p>
</a> </li>
<li> <a href = "#">
<h2> технический брат: </h2>
<p> O2DS - это то же самое, что и книга, которую я перевел. Я должен перевести это быстрее его. Работать сверхурочно ночью, быстро! быстрый! быстро! </p>
</a> </li>
<li> <a href = "#">
<h2> artech: </h2>
<p> В WCF так мало постов. Кажется, мне нужно публиковать больше постов для всех, чтобы узнать </p>
</a> </li>
<li> <a href = "#">
<h2> jirigala: </h2>
<p> Чтобы сделать управление разрешениями и управление рабочими процессами до крайности моих способностей, человек может делать только так мало вещей </p>
</a> </li>
<li> <a href = "#">
<h2> мастер боевых искусств: </h2>
<p> Я никогда не пойду на интервью менее чем за 25 000 юаней, это бабушка </p>
</a> </li>
</ul>
Каждое примечание добавляет соединение HREF, в основном для поддержки доступа к клавиатуре, а код CSS выглядит следующим образом:
*{
поля: 0;
Заполнение: 0;
}
тело{
Семейство шрифта: ариал, без зарисования;
размер шрифта: 100%;
поля: 3ем;
Фон:#666;
Цвет: #ffff;
}
H2, p {
размер шрифта: 100%;
шрифт-вес: нормальный;
}
ul, li {
Список стиля: нет;
}
уль {
переполнение: скрыто;
Заполнение: 3EM;
}
уль li a {
Текстовое декорация: нет;
Цвет:#000;
Фон: #FFC;
дисплей: блок;
Высота: 10EM;
Ширина: 10EM;
Заполнение: 1ем;
}
уль li {
поля: 1ем;
Плавание: осталось;
}
Эффекты следующие:
Шаг 2: Тени и рукописные курсивные персонажи
Этот шаг состоит в том, чтобы реализовать теневой эффект квадратов и изменить шрифт на мудреца (только английский). Поскольку Google обеспечивает поддержку API FONT, мы можем использовать его напрямую. Сначала добавьте звонок в Google API:
<link href = "http://fonts.googleapis.com/css?family=reenie+beanie:cregular" rel = "stylesheet" type = "text/css">
Затем установите ссылку на этот шрифт:
Ul li H2
{
размер шрифта: 140%;
шрифт-вес: жирный шрифт;
надоеволос: 10px;
}
уль ли р
{
Семейство с шрифтом: «Рини Бини», Ариал, Санс-Сэриф, Microsoft Yahei;
размер шрифта: 110%;
}
Что касается тени, поскольку каждый браузер не полностью поддерживает их, их нужно обрабатывать отдельно, а код выглядит следующим образом:
уль ли а
{
Текстовое декорация: нет;
Цвет: #000;
Фон: #FFC;
дисплей: блок;
Высота: 10EM;
Ширина: 10EM;
Заполнение: 1ем; / * Firefox */
-Мозо-бокс-тень: 5px 5px 7px rgba (33,33,33,1); / * Safari+Chrome */
-Вебкит-бокс-шахта: 5px 5px 7px rgba (33,33,33, 0,7); / * Opera */
Box-Shadow: 5px 5px 7px rgba (33,33,33, 0,7);
}
Эффекты следующие:
Шаг 3: Наклоните квадрат
Чтобы наклонить квадрат, нам нужно добавить следующий код в Li-> a:
уль li a {
-Вебкит-трансформ: вращение (-6deg);
-o-transform: utate (-6deg);
-Моз-трансформ: вращение (-6deg);
}
Но для того, чтобы сделать квадратный наклон случайным образом, вместо всего наклона, нам нужно использовать новый селектор CSS3, чтобы квадрат наклонялся на 4 DEG каждые 2, отрицательные 3 DEG каждые 3 и 5 DEG каждые 6:
UL LI: Nth-Child (даже) a {
-О-трансформирование: вращение (4deg);
-Вебкит-трансформ: вращение (4deg);
-Моз-трансформ: вращение (4deg);
позиция: относительно;
Верх: 5px;
}
ul li: Nth-Child (3n) a {
-o-transform: utate (-3deg);
-Webkit-transform: rotate (-3deg);
-Моз-трансформ: вращение (-3deg);
позиция: относительно;
Верх: -5px;
}
ul li: Nth-Child (5n) a {
-О-трансформирование: вращение (5deg);
-Webkit-Transform: rotate (5Deg);
-Моз-трансформ: вращение (5deg);
позиция: относительно;
Верх: -10px;
}
Эффекты следующие:
Шаг 4: масштабирование квадрата при падении и фокусировании
Чтобы достичь эффекта масштабирования при падении и фокусировке, нам нужно добавить следующий код:
Ul Li A: Hover, Ul Li A: Focus {
-Мозо-бокс-тень: 10px 10px 7px rgba (0,0,0, 0,7);
-Webkit-box-shadow: 10px 10px 7px rgba (0,0,0, 0,7);
Box-Shadow: 10px 10px 7px rgba (0,0,0, 0,7);
-Вебкит-трансформация: масштаб (1,25);
-Моз-трансформ: масштаб (1,25);
-О-трансформация: масштаб (1,25);
позиция: относительно;
z-index: 5;
}
Установка Z-индекса на 5-позволить квадрату покрывать другие квадраты при увеличении. В то же время, поскольку фокус также устанавливается, он также поддерживает доступ к ключам вкладки, а эффект выглядит следующим образом:
Шаг 5: плавный переход и добавьте цвета
Специальные эффекты на четвертом шаге выглядят немного жесткими. Мы можем добавить переход для достижения гладкого анимационного эффекта. Кроме того, цвета относительно одиноки. Мы можем установить разные цвета. Сначала добавьте переход в Ul-> li-> a:
-Моз-трансляция: -moz-трансформ .15s линейный;
-О-транзиция: -o-transform .15s линейно;
-Вебкит-трансляция: -Webkit-transform .15s линейно;
Затем определите разные цвета в ровных и 3n:
UL LI: Nth-Child (даже) a {
-О-трансформирование: вращение (4deg);
-Вебкит-трансформ: вращение (4deg);
-Моз-трансформ: вращение (4deg);
позиция: относительно;
Верх: 5px;
Фон: #CFC;
}
ul li: Nth-Child (3n) a {
-o-transform: utate (-3deg);
-Webkit-transform: rotate (-3deg);
-Моз-трансформ: вращение (-3deg);
позиция: относительно;
Верх: -5px;
Фон: #CCF;
}
Таким образом, наш последний эффект достигнут:
Суммировать
На этом этапе мы использовали основные особенности HTML5 и CSS3, чтобы создать довольно хороший эффект. HTML5/CSS3 действительно очень мощный. Если вы добавите некоторые расширенные функции, такие как сочетание их с JavaScript, вы можете добиться более удивительного эффекта. Это можно увидеть из статей Laboratory Series HTML5, предоставленных вам Дайанте Брик.
Также: текст на картинке изготовлен чисто. Если есть какое -то сходство, это просто совпадение. Спасибо!