предисловие
Это снова сезон интервью «золото три серебра четыре», вот я и разобрался... а! ? Извините, я отвлекся... Я чувствую, что домашняя страница Наггетс в последнее время была заполнена материалами, связанными с интервью Я открыл Наггетс и не знал, что смотреть.
Прочитав на прошлой неделе много о композиции плоскостей, я использовал CSS, чтобы нарисовать что-то вроде фонового узора. Здесь мы выбрали для вас 12 видов, с точки зрения наблюдателя, от простого к сложному, чтобы объяснить вам идеи. В статье много картинок и кодов, поэтому она длинная, рекомендуется сначала поставить лайк и собрать.
⚠Внимание, в этой статье нет подробного объяснения базовых знаний, но рекомендуется учиться во время чтения статьи и практиковаться, что эффективнее.
⚠Внимание, в конце статьи сюрпризы.
Визуализации шоу
Введение в порядок анализа
После грубого взгляда на эффект, мы следим за количеством элементов узора и степенью вариации элементов, сложностью анимации,Иметь подсказкуОтсортируйте подразделы статьи по другим факторам, как показано на рисунке ниже. Каждый раздел имеет исходный код, и вы можете перейти прямо к шаблону, который хотите увидеть, через заголовок.
1. Кольцевая деформация
<div class="card">
<div class="node" v-for="item in 100"></div>
</div>
<style>
// 其余所有图案的 card 类标签都套用了这段样式，为了减少文章长度，下略。
.card {
width: 200px;
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
</style>
Через эффект анимации картинки мы грубо получаем режим смены анимации.
-
Некоторые кольца деформированы до длины двух колец, а также изменился цвет фона.
Соблюдая порядок колец переменной длины, можно найти закон «каждое третье становится длиннее», предположительно используя селектор :nth-child(3).
Ниже приведен исходный код CSS.
.card {
justify-content: flex-start;
overflow: hidden;
cursor: pointer;
// 每逢三个元素，则执行动画，源代码和我们分析的动画的顺序相反，圆环是从长变短，不过不影响
.node {
border: solid 5px #F29338;
border-radius: 50%;
&:nth-child(3n) {
width: 40px;
flex-basis: 40px;
background: #F8C798;
animation: change-circle-width 2s ease alternate infinite;
}
}
}
@keyframes change-circle-width {
from {
width: 40px;
flex-basis: 40px;
background: #F8C798;
}
60% {
width: 20px;
flex-basis: 20px;
background: transparent;
}
// 动画 60% - 100% 这段时间，属性没有变动，所以图案看起来像是静止的。
to {
width: 20px;
flex-basis: 20px;
background: transparent;
}
}
2. Плитка в туалете
<div class="card">
<div class="node" v-for="item in 100"></div>
</div>
Идея аналогична предыдущей картинке, за исключением того, что добавлено несколько круглых шаров.
-
Анимация шара должна включать в себя смещение положения и изменение цвета и прозрачности.
-
Когда мышь зависает (обратите внимание на жест мыши в правом нижнем углу изображения), на изображении появляется ряд маленьких шариков, и стиль и поведение почти такие же, как у исходных шариков в предыдущем ряду.
Предполагается, что второй ряд шаров использует эффект задержки анимации.
-
Обратите внимание на количество шаров, а? Кажется, есть какая-то проблема, количество круглых шаров и количество плиток не совпадают. Это должно быть особое отношение к порядку, в котором шар отображается и скрывается.
Ниже приведен исходный код CSS.
.card {
cursor: pointer;
// 鼠标悬浮时显示第二排的小圆球
&:hover {
.node {
&:nth-child(2n)::after {
visibility: unset;
}
}
}
.node {
background: #71A2DB;
outline: solid 1px white;
// 3n-1，3n+1 一起使用时等价于 3n
&:nth-child(3n-1),
&:nth-last-child(3n+1) {
background: #C2D7F0;
}
// 去除末行及每行末尾的伪元素
&:nth-child(10n)::after,
&:nth-last-child(-n+10)::after {
display: none;
}
&::after {
left: 75%;
top: 75%;
width: 50%;
height: 50%;
border-radius: 50%;
background: white;
animation: card-4-circle-move 1s linear alternate infinite;
}
&:nth-child(2n)::after {
animation: card-4-circle-move-delay 1s linear alternate infinite;
animation-delay: .3s;
visibility: hidden;
}
}
}
@keyframes card-4-circle-move {
from {
left: 45%;
top: 45%;
opacity: 1;
background: white;
}
to {
left: 130%;
top: 130%;
opacity: 0;
background: #F2C07D;
}
}
@keyframes card-4-circle-move-delay {
from {
left: 45%;
top: 45%;
opacity: 1;
background: #F2C07D;
z-index: 2;
}
to {
left: 130%;
top: 130%;
opacity: 0;
background: white;
}
}
3. Треугольник и мяч
<div class="card">
<div class="node" v-for="item in 100"></div>
</div>
На первый взгляд рисование круга и треугольника с псевдоэлементами для каждого узла завершает диаграмму.
На самом деле это неправильно, не прокручивайте ответ, подумайте почему.
Разделительная линия ответа, будьте осторожны, чтобы пересечь линию:
Обратите внимание на шаблон и HTML-код:
-
Глядя на каждый ряд, в каждом ряду 10 треугольников, но 9 кругов + 2 полукруга в ряду.
Предполагается, что круг собран из полукругов, и в сочетании с продольным наблюдением можно сделать вывод, что круг состоит из 4 1/4 кругов.
Но нет возможности нарисовать 1/4 круга псевдоэлементами. Идея неверна, а потом изменить идею.
Догадавшись, что псевдоэлемент представляет собой полный круг, используйте Box-Shadow, чтобы скопировать 4 копии и поместить их в четыре угла квадрата. .card или .node используют переполнение для обрезки лишних элементов.
-
Посмотрите еще раз на треугольник.
Метод рисования треугольников относительно распространен, и его можно нарисовать с помощью прозрачной границы + цветной границы.
Угол треугольника меняется очень регулярно, и можно сделать грубый вывод, что угол поворота связан с количеством столбцов.
.card {
overflow: hidden;
cursor: pointer;
// 根据三角形的序号与10的模来确定旋转角度
@for $i from 0 through 9 {
.node:nth-child(10n - #{$i})::before {
transform: rotate((-19 + $i) + unquote('deg'));
}
}
// 上面那串函数编译出来就成了下面这一长串模样
// .node:nth-child(10n)::before {
// transform: rotate(-19deg);
// }
// .node:nth-child(10n-1)::before {
// transform: rotate(-18deg);
// }
// .node:nth-child(10n-2)::before {
// transform: rotate(-17deg);
// }
// .node:nth-child(10n-3)::before {
// transform: rotate(-16deg);
// }
// .node:nth-child(10n-4)::before {
// transform: rotate(-15deg);
// }
// .node:nth-child(10n-5)::before {
// transform: rotate(-14deg);
// }
// .node:nth-child(10n-6)::before {
// transform: rotate(-13deg);
// }
// .node:nth-child(10n-7)::before {
// transform: rotate(-12deg);
// }
// .node:nth-child(10n-8)::before {
// transform: rotate(-11deg);
// }
// .node:nth-child(10n-9)::before {
// transform: rotate(-10deg);
// }
.node {
background: #F5C1CB;
filter: saturate(1.6);
// 通过伪元素 Border 绘制的三角形
&::before {
left: 0;
top: -8px;
border: solid 10px transparent;
border-bottom-color: #D2F3BF;
z-index: 1;
}
// 使用 Box-Shadow 属性，将圆形复制了额外的三份
&::after {
left: -5px;
top: -5px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #FBF5C5;
z-index: 0;
box-shadow: 20px 0 #FBF5C5, 20px 20px #FBF5C5, 0 20px #FBF5C5;
}
}
}
4. Вариант плитки
<div class="card">
<div class="node" v-for="item in 100"></div>
</div>
Эта диаграмма в целом должна быть относительно простой. Дополнительным примечанием является то, где появляются эти специальные цветные круги.
-
Глядя на масштабирование сеток при перемещении мыши, можно сделать вывод, что каждая сетка состоит из 4 1/4 кругов и креста.
С крестом легко работать, это можно сделать, скопировав псевдоэлемент размером 2*2 пикселя через Box-Shadow.
Согласно кругу 1/4, можно сделать вывод, что у каждой сетки есть переполнение: скрытый стиль.
-
Есть несколько возможных реализаций специальных цветных кругов.
Во-первых, при компиляции Scss вызовите функцию random и измените цвет этих кружков случайного положения.
Во-вторых, внедрите псевдослучайный CSS, используя принцип Cicada или аналогичный.
В-третьих, писать до смерти.
Вред~ Здесь переходим непосредственно к исходному коду.
.card {
.node {
background: #EE92A5;
overflow: hidden;
transition: .3s;
cursor: pointer;
// 鼠标在格子上悬浮时的放大效果
&:hover {
transform: scale(1.4);
}
// 十字线的构成
&::before {
left: 8px;
top: 8px;
width: 2px;
height: 2px;
background: white;
z-index: 0;
box-shadow: 0 2px white, 2px 0 white, -2px 0 white, 0 -2px white;
}
// 圆形的构成
&::after {
left: -8px;
top: -8px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #F8C798;
z-index: 0;
box-shadow: 20px 0 #F8C798, 20px 20px #F8C798, 0 20px #F8C798;
}
// CSS 伪随机给特定元素设置特殊色。在实践时，可以自己调整以下参数，以达到想要的效果。
&:nth-child(2n)::after {
background: #E03A5C;
}
&:nth-child(3n-1)::after,
&:nth-child(3n)::after,
&:nth-child(5n)::after,
&:nth-child(6n)::after,
&:nth-child(7n-3)::after {
background: #F8C798
}
}
}
5. Горы и облака
<div class="card">
<div class="node" v-for="item in 100"></div>
</div>
Этот узор, ну... Честно говоря, кто может увидеть, что это такое! На самом деле, подумал я про себя, если бы не то, что я нарисовал сам, наверное, я бы не смог разглядеть узор~~(Красная пыль)~~, но я отнесусь к этому серьезно. Смотри ниже.
-
Треугольники, простые в обращении, рисуются с помощью псевдоэлементов. Что касается цвета, вы можете следовать псевдослучайной идее CSS предыдущей картинки. Что касается анимации горы, то трудно сказать, движется ли гора или гора следует за другими элементами.
-
Посмотрите еще раз на горизонтальную линию, нет, зачем столько горизонтальных и вертикальных линий на этой картинке, какой псевдоэлемент есть какой нет, вред...
Думаю, горизонтальные и вертикальные линии - это контур сетки. Нет, контуры могут быть только квадратными.
Может это Бордер? Из наблюдения видно, что края этих горизонтальных линий представляют собой полупрозрачные пиксели, а в сочетании с треугольниками можно провести границы.Предполагается, что горизонтальные и вертикальные линии являются границей закругленной прямоугольной решетки, которая блокируется Белая граница псевдоэлемента, образующего треугольник, часть его исчезла.
-
Продолжайте наблюдать за линиями и обнаружите, что некоторые горизонтальные линии исчезают, некоторые горизонтальные линии только сокращаются, но не исчезают, а все вертикальные линии только сокращаются, но не исчезают.
Согласно тому факту, что когда вертикальная линия становится длиннее, это должно сопровождаться укорачиванием или исчезновением горизонтальной линии, предполагается, что сетка испытывает изменение высоты, а не смещение. Продолжайте предполагать, что треугольник может двигаться вместе с решеткой.
Согласно горизонтальной линии между двумя горами в вертикальном направлении и тенденции движения горы одинаковы, предполагается, что горизонтальная линия на рисунке является верхней стороной сетки, а не нижней стороной, а нижняя сторона прикрыта.
Предполагается, что гора закрывает нижнюю часть сетки, но это не согласуется с фактическим наблюдением, потому что, когда гора движется вверх, вертикальная линия расширяется и сжимается. Исчезновение части стороны сетки вызвано не границей псевдоэлемента, из которого состоит гора, а другим псевдоэлементом, который также является примерно прямоугольником.
-
Мы можем примерно составить шаблон: сетка привязана к гибкому макету с align-items: center, с треугольниками и другим псевдоэлементом, похожим на прямоугольник, движущимся вместе с сеткой.
Ну... глубоко вздохните, если вы не понимаете вышеизложенного, давайте взглянем на картинку ниже. Вот как это выглядит со снятой белой маской.
(Кто дал мне имя)
Ниже приведен исходный код CSS.
.card {
cursor: pointer;
// 横线与竖线并不是节点的 Border，而是背景色+遮罩形成的
// 格子会根据动画在高度上变化
.node {
background: #A45963;
border-radius: 90%;
animation: card-1 .4s ease alternate infinite;
// 格子动画延迟处理
&:nth-child(2n) {
animation-delay: .2s;
}
&:nth-child(3n) {
animation-delay: .3s;
}
&:nth-child(4n) {
animation-delay: .3s;
}
// 山的颜色处理
&:nth-child(2n)::before {
border-bottom-color: #F5CB6C;
}
&:nth-child(3n)::before {
border-bottom-color: #F5856C;
}
&:nth-child(4n)::before,
&:nth-child(5n)::before,
&:nth-child(6n)::before,
&:nth-child(7n)::before,
&:nth-child(8n)::before,
&:nth-child(9n)::before,
&:nth-child(10n)::before {
border-bottom-color: #D2F3BF;
}
// 山的构成
&::before {
left: 0;
top: -5px;
border: solid 10px transparent;
border-bottom-color: #D2F3BF;
z-index: 2;
}
// 白色遮罩
&::after {
left: 1px;
top: 1px;
width: 19px;
height: 18px;
background: white;
}
// 这是一个特殊处理，为了让白色遮罩长度减少1像素以显示每行格子的背景颜色的最后一列像素
&:nth-child(10n)::after {
width: 18px;
}
}
}
@keyframes card-1 {
from {
height: 19px;
}
to {
height: 8px;
}
}
6. Кактус, растущий на ледяных скалах
<div class="card">
<div class="node" v-for="item in 100"></div>
</div>
Эта цифра относительно проста.
-
Легко понять, что сетка состоит из горизонтальных и пунктирных линий и цвета фона.
Легко понять, что цилиндрический «кактус» получается при контроле разрезания каждой сетки по отдельности.
Анимация перехода от полукруга к квадрату может быть вырезана с помощью свойства Clip-Path.Предполагается, что вертикальная и горизонтальная линии являются соответственно рисунком псевдоэлемента.
Ниже приведен исходный код CSS.
.card {
.node {
background: #71A2DB;
// 部分仙人掌添加动画
&:nth-child(3n)::after,
&:nth-child(3n+2)::after,
&:nth-child(5n-3)::after,
&:nth-child(6n-2)::after,
&:nth-child(7n+1)::after {
animation: card-7-grow .6s ease alternate infinite;
}
// 一部分仙人掌不需要添加动画
&:nth-child(3n-1)::after,
&:nth-child(3n)::after,
&:nth-child(5n)::after,
&:nth-child(6n)::after,
&:nth-child(7n-3)::after {
clip-path: circle(75% at 0 50%);
animation: none;
}
// 这里使用的是背景色 + Box-Shadow 画线。也可以使用 Border + Box-Shadow 画线
&::before {
top: 1px;
left: 0px;
width: 100%;
height: 1px;
background: white;
box-shadow: 0 2px white, 0 4px white, 0 6px white, 0 8px white, 0 10px white, 0 12px white, 0 14px white, 0 16px white, 0 18px white;
}
&::after {
top: 0;
left: 1px;
width: 1px;
height: 100%;
background: white;
box-shadow: 2px 0 white, 4px 0 white, 6px 0 white, 8px 0 white, 10px 0 white, 12px 0 white, 14px 0 white, 16px 0 white, 18px 0 white;
transition: .6s;
}
}
// 鼠标悬浮时显示所有的线条（为了使 Clip-Path 有过渡效果，这里不能直接去掉属性，而是要换一个较大的值）
&:hover {
.node {
&::after {
animation: none;
clip-path: circle(150% at 0% 50%);
}
}
}
}
@keyframes card-7-grow {
from {
clip-path: circle(50% at 0 50%);
}
50% {
clip-path: circle(50% at 0 50%);
}
to {
clip-path: circle(150% at 0 50%);
}
}
7. No Name 2
Эта вещь является усовершенствованной версией предыдущей картинки.В заблуждение может вводить предположение, что псевдоэлемент является точкой, а не линией, а затем использовать пустой псевдоэлемент для построения других вещей в ромбовидной сетке.
.card:nth-child(8) {
.node {
border: solid 8px #71A2DB;
border-top: 0;
border-left: 0;
background: #71A2DB;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
transition: .3s;
cursor: pointer;
// 给一部分格子去掉 Border
&:nth-child(3n-1),
&:nth-child(3n),
&:nth-child(5n),
&:nth-child(6n),
&:nth-child(7n-3) {
border: none;
clip-path: circle(50%);
&:hover {
clip-path: circle(30%);
}
}
// 将一部分格子裁剪为菱形区域。Clip-Path 四个值对应菱形四个顶点位置。
&:nth-child(2n),
&:nth-child(3n) {
border: solid 8px #CCDDF2;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
}
&::before {
top: 1px;
left: 0px;
width: 100%;
height: 1px;
background: white;
box-shadow: 0 2px white, 0 4px white, 0 6px white, 0 8px white, 0 10px white, 0 12px white, 0 14px white, 0 16px white, 0 18px white;
}
&::after {
top: 0;
left: 1px;
width: 1px;
height: 100%;
background: white;
box-shadow: 2px 0 white, 4px 0 white, 6px 0 white, 8px 0 white, 10px 0 white, 12px 0 white, 14px 0 white, 16px 0 white, 18px 0 white;
}
}
}
8. Сожмите мороженое
(⊙﹏⊙), я не хотел рисовать так отвратительно, потому что он использовал контрастный фильтр CSS, этот фильтр повысит контраст и сделает цвет ярче.
Принцип эффекта слияния следующий: используйте фильтр контраста на родительском элементе, а фильтр размытия на дочернем элементе, вы обнаружите, что когда дочерние элементы находятся близко друг к другу, возникает эффект слияния.
Метод обработки границ изображения должен быть очень распространенным, и это можно сделать с помощью Background-Image. Кроме того, в «CSS Secret» также упоминается метод использования наложения фонового градиента для создания границ изображения. Вы также можете попробовать следующее (объявление : Приезжайте к Лионаду)Универсальная группа обмена805392878, в группе разные книги и интересности)
Код приведен непосредственно ниже.
// 可以看到父元素用到了 filter: contrast 滤镜
.card {
position: relative;
box-sizing: border-box;
flex-direction: column;
justify-content: flex-end;
align-items: center;
border: solid .5em transparent;
border-image: 8 repeating-linear-gradient(-45deg, #F5E66C 0, #F5E66C .5em, transparent 0, transparent 1em, #DA60D2 0, #DA60D2 1.5em, transparent 0, transparent 2em);
background: white;
cursor: pointer;
filter: contrast(10);
// 给每个格子分别设定背景颜色和动画延迟
$background:(#DA60D2, #E7667E, #E7667E, #F5866C, #F5866C, #F5E66C);
@for $i from 1 through 6 {
.node:nth-child(#{$i}) {
width: (80-(10 * ($i - 1)))+unquote('px');
animation: card-6 .8s ease-in (0.1*$i)+unquote('s') alternate infinite, card-6-margin .8s ease-in alternate infinite;
background: nth($background, $i);
}
}
// 格子使用了 blur 滤镜
.node {
flex-basis: 30px;
margin-top: -15px;
width: 30px;
height: 50px;
filter: blur(5px);
}
// 鼠标悬浮时暂停动画，因为子元素的融化效果，所以需要把字体调粗一些
&:hover {
&::before {
content: "Paused";
position: absolute;
left: 5px;
top: 5px;
font-weight: bolder;
}
.node {
animation-play-state: paused;
}
}
@keyframes card-6 {
from {
border-radius: 50%;
}
to {
width: 80px;
border-radius: 0;
}
}
@keyframes card-6-margin {
from {
margin-top: -13px;
}
to {
margin-top: 0px;
}
}
}
9. Lionad
Конец победы почти здесь, держись! w(ﾟДﾟ)w
<div class="card 5">
<div class="node" />
</div>
Это первый раз, когда мы столкнулись с фоновой движущейся ситуацией, но композиция этого изображения проста, следующий анализ.
-
Движение фона — это не что иное, как CSS Animation + Background-* свойства завершены. Фоновый градиент этого изображения представляет собой простой двухтекстурный градиент под углом 45 градусов.Предполагается, что фон использует Animation + Background-Position для перевода.
-
Глядя на текстовую часть, текст, который легко получить, состоит из фона с градиентом 180 градусов + Text-Shadow.
Может ли текст использовать градиентный фон? Да, функция обрезки текста по фону может быть достигнута с помощью Background-Clip.
Поскольку цвет Text-Shadow темнее градиента, видно, что Text-Shadow не обрезается шрифтом. Предполагается, что текст должен состоять из двух псевдоэлементов. атрибут Background-Clip лучше, чем использование псевдоэлемента Text-Shadow.
-
Наконец, под текстом есть две горизонтальные линии. Существует слишком много способов реализовать эту картину, также можно использовать двойной псевдоэлемент Border, также можно использовать Box-Shadow, также можно использовать Border-Image, а также можно использовать Background-Image...
См. исходный код ниже.
.card {
background: linear-gradient(45deg, #F5CB6C 0%,#F5CB6C 20%,#F5856C 20%, #F5856C 45%,#F5CB6C 45%,#F5CB6C 70%,#F5856C 70%, #F5856C 95%,#F5CB6C 95%,#F5CB6C 100%);
background-size:30px 30px;
background-position:0 0;
animation: card-5 1s infinite linear;
cursor: pointer;
.node {
// 使用 Background-Clip 的伪元素
&::before {
content: "Lionad";
left: -1.5em;
top: -.7em;
font-size: 50px;
font-family: didot;
font-weight: bolder;
color: transparent;
background: linear-gradient(180deg, #F5CB6C, #F5856C);
background-size: 1px 2px;
background-clip: text;
-webkit-background-clip: text;
z-index: 2;
}
// 生产 Text-Shadow 的伪元素
&::after {
content: "Lionad";
left: -1.5em;
top: -.7em;
font-size: 50px;
font-family: didot;
font-weight: bolder;
color: transparent;
text-shadow: 4px 4px 0px #F5856C;
box-shadow: 0 5px 0px #F5CB6C, 0 12px 0px #F5856C;
}
}
@keyframes card-5 {
0%{
background-position: 0 0;
}
100%{
background-position: 30px 0;
}
}
}
10. и 11. Калейдоскоп
<div class="card 10"></div>
<div class="card 11"></div>
Объединение этих двух шаблонов связано с тем, что идея одна и та же. Честно говоря, впервые увидев этот узор, я тоже была ошарашена необъяснимой сменой цвета, поэтому поясню принцип прямо здесь.
-
Оба рисунка нарисованы градиентами, если приглядеться, можно увидеть, что узоры слева и справа — это наложение трех градиентов.
Разница в том, что наименьший градиент слева — это радиальный градиент, а тот, что справа — конический градиент (называемый на английском языке коническим градиентом, вы можете использовать его для рисования круговых диаграмм).
-
Необъяснимое преобразование цвета (например, центральная точка слева) использует эффект CSS Blend-Mode, который отвечает за вычисление конечного цвета, отображаемого при наложении двух цветов, что можно понимать как фильтр.
-
Я видел это до движения фона, левое изображение - это преобразование Background-Position, правое изображение - это преобразование Background-Size.
Ниже приведен исходный код.
// 右图的样式代码
.card {
// 这里使用了三层背景渐变，两层圆锥渐变和一层辐射渐变
background-image:
repeating-conic-gradient(red 50%, #E1F5C4 60%),
repeating-conic-gradient(red 50%, #E1F5C4 60%),
radial-gradient(
gold 0%, gold 35%,
red 35%, red 40%,
orangered 40%, orangered 50%,
gold 50%, gold 60%,
yellowgreen 60%, yellowgreen 70%,
skyblue 70%, skyblue 80%,
steelblue 80%, steelblue 90%,
violet 90%
);
// 对每一层被渐变分别设置混合模式
background-blend-mode:
lighten,
overlay,
lighten;
// 对每一层被渐变分别设置背景大小（40px 是因为正好能被 200px 的盒子整除）
background-size:
40px 40px,
6em 6em,
8em 8em;
background-position: 50% 50%;
transition: .45s ease-in;
cursor: pointer;
// 鼠标悬浮时，变换渐变大小
&:hover {
background-size:
40px 40px,
4em 4em,
12em 12em;
}
}
12. Соус Тора (Тигровый)
Это просто целая картина, что в ней такого замечательного?
Нет, это не картина.
Как вы думаете, есть ли внешняя ссылка? Нет нет. Это Тора-чан, нарисованная только с помощью Box-Shadow.
Его CSS-код выглядит так:
// 灰色 Border
.card {
justify-content: flex-start;
align-items: flex-start;
border: solid 10px #eee;
box-sizing: border-box;
overflow: hidden;
// トラ酱
.node {
width: 1px;
height: 1px;
box-shadow: ????? 你猜，使劲儿猜这后面有多长
}
}
Что касается конкретного принципа, см. мою предыдущую статью о Nuggets.
практические вопросы
Наконец, вот несколько упражнений, требующих небольшого размышления, для студентов, у которых еще есть боевой дух, чтобы попрактиковаться~~ (Я не белая проститутка!)~~.
- «Соус Тора» с использованием Box-Shadow + CSS Animation для воспроизведения GIF
- «Кактус, растущий на ледяной скале», могут ли эти горизонтально вытянутые кактусы вырасти длиннее двух блоков?
О да, не спрашивайте меня, для чего эти упражнения.
Упражнения делают то же самое, что и эти узоры, которые я нарисовал — я не знаю, что делать, просто для удовольствия.
Сказав это, все старые приятели по Nuggets — технические игроки, и они публикуют статьи с интервью каждый день, что слишком жестко. Никаких прибамбасов, неудивительно, что я не могу найти женский билет~~ (если есть какие-то сходства, пожалуйста, займите правое место, голова ручной собаки (￣ε(#￣))~~.
LAST BUT IMPORTANT
Лайкайте, подписывайтесь и комментируйте три дня подряд, а еще через три дня вы получите лотерею из комментариев к статье Nuggets.«За пределами обычного макета»
Это хороший пример типографики.
Фронтенд-инженеры также должны хорошо изучать дизайн~ ヽ(￣ω￣(￣ω￣〃)ゝ
Подробнее
Соответствующие веб-сайты или ссылки, использованные при написании этой статьи
- CSS Doodle: Окончательное решение для шаблонов CSS
- NIPPON COLORS: красивый японский веб-сайт подбора цветов.
- OXXO STUDIO: Качественный интерфейсный блог, отсюда и эффект в "Squeeze Ice Cream".
- Code Pen @JiaQianKoh: Эта страница имеет различные эффекты градиента.
- Patternify: Интересный сайт для генерации пиксельного фона, наконец-то не нужно писать код...
- CSS3 Patterns: Веб-сайт CSS Patterns, написанный автором "CSS Secrets", мне не нужно говорить больше...
В моем блоге есть исходный кодLionad's Blog.
Перепечатайте по желанию, указав источник Наггетсов и имя Лионада.