Это мой четвертый день в Gengwen Challenge.
Первый взгляд на эффект:
Предисловие:
Эта идея была предложена мастером Стивеном на станции B. Мне она показалась очень хорошей, и я сделал ее сам. (чистый css), ниже приведен подробный процесс. Полный код в конце.
выполнить:
1. Сначала определите тег div как кнопку с именем класса .anniu:
<div class="anniu">Aurora Borealis night</div>
2. Базовый стиль css для .anniu, длина и ширина, размер шрифта и т.д.:
.anniu,.anniu::after{
font-family: 'Do Hyeon', sans-serif;
width: 260px;
height: 80px;
text-align: center;
font-size: 22px;
line-height: 80px;
color: rgb(255, 251, 251);
background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
box-shadow: 5px 0 0 rgb(0, 204, 255);
cursor: pointer;
position: relative;
}
Font-Samea: «Do Hyeon», Sans-Serif; представляет шрифты, идиэтот URL, который имеет много типов шрифтов.
фон: линейный градиент (30 градусов, прозрачность 10%, RGB (255, 136, 0) 10% 95%, RGB (0, 255, 149) 95%);
Умное использование цвета фона для создания формы обрезанных углов. Это утверждение указывает, что цвет градиента отображается под углом 30 градусов, от 0 до 10 % — прозрачный, от 10 % до 95 % — оранжевый, а от 95 % до 100 % — зеленый.
box-shadow: 5px 0 0 rgb(0, 204, 255); представляет синюю тень справа.
курсор: указатель; Указывает, что мышь изменена со стрелки на маленькую руку.
3. Определите двойной псевдокласс, который выглядит точно так же, как .anniu, и охватывает .anniu посредством абсолютного позиционирования.На шаге 2 определен тот же базовый стиль, что и селектор объединения .anniu, а затем добавьте следующий стиль:
.anniu::after{
content: 'Aurora Borealis night';
position: absolute;
top: 0;
left: 0;
text-shadow: -5px -2px 0 rgb(0, 183, 255),
5px 2px 0 rgb(0, 255, 115) ;
visibility: hidden;
}
тень текста: -5px -2px 0 rgb (0, 183, 255), 5px 2px 0 rgb(0, 255, 115) ; Указывает тень шрифта, чтобы шрифт имел цвет rgb(0, 183, 255) и цвет rgb(0, 255, 115) в верхнем левом и нижнем правом углу соответственно тень. видимость: скрытый означает скрыть этот псевдокласс.
4. Отобразите эффект один раз с помощью атрибута clip-path: inset() области обрезки и преобразования: translate();offset;Конкретное значение заключается в следующем: clip-path: вставка () может быть представлена путем создания элемента, который может быть вырезан в режиме отображения области (прямоугольник), затем часть в области отображения, за пределами области скрывает. transform: translate() движется;
Например, обрежьте двойной псевдокласс: clip-path: inset(20% -5px 60% 0); transform: translate(-5px, 0); следующим образом(20% -5px 60% 0); Указывает, что псевдокласс кадрирования обрезается до 20% сверху вниз, -5px обрезается справа налево (потому что должна отображаться тень, поэтому она отрицательная), и 60 обрезается снизу вверх %, обрезается 0% слева направо, таким образом останутся только оставшиеся 20% средней высоты и 5px ширины, а остальные обрезанные остатки будут hidden и set translate() Сместите его немного влево, чтобы получить вышеуказанный эффект.
Далее обрежьте эффект псевдокласса в 3 раза.
клип-путь: вставка (50% -5px 30% 0); получить:клип-путь: вставка (80% -5px 5% 0); получить:
клип-путь: вставка (0-5px 80% 0); получить:
5. Через эффект отсечения на четвертом шаге мы можем установить анимацию анимации.Мышь будет отображать различные эффекты отсечения и эффекты смещения псевдоклассов.Положение отсечения и положение смещения можно установить в соответствии с вашими собственными ощущениями.
.anniu:hover::after{
animation: san 1s ;
animation-timing-function: steps(1, end);
}
@keyframes san{
0%{
clip-path: inset(20% -5px 60% 0);
transform: translate(-6px,5px);
visibility: visible;
}
10%{
clip-path: inset(50% -5px 30% 0);
transform: translate(6px,-5px);
}
20%{
clip-path: inset(20% -5px 60% 0);
transform: translate(5px,0px);
}
30%{
clip-path: inset(80% -5px 5% 0);
transform: translate(-8px,5px);
}
40%{
clip-path: inset(0 -5px 80% 0);
transform: translate(-4px,-3px);
}
50%{
clip-path: inset(50% -5px 30% 0);
transform: translate(-6px,-5px);
}
60%{
clip-path: inset(80% -5px 5% 0);
transform: translate(-7px,5px);
}
70%{
clip-path: inset(0 -5px 80% 0);
transform: translate(3px,6px);
}
80%{
clip-path: inset(50% -5px 30% 0);
transform: translate(5px,5px);
}
90%{
clip-path: inset(20% -5px 60% 0);
transform: translate(6px,-5px);
}
100%{
clip-path: inset(0 -5px 80% 0);
transform: translate(1px,5px);
}
}
Видимость: видимый; пусть отображается псевдокласс. Анимация-Время-Функция: Шаги (1, конец), 1 представляет от 0% до 10%, от 10% до 20%, .... Между ними только один кадр, если запись 2 будет два кадра, только один кадр лучше подходит для эффекта коробки. END указывает, что первый кадр является первым шагом. Если START указывает, что первый кадр является концом первого шага.
Полный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(243, 239, 8);
}
.anniu,.anniu::after{
font-family: 'Do Hyeon', sans-serif;
width: 260px;
height: 80px;
text-align: center;
font-size: 22px;
line-height: 80px;
color: rgb(255, 251, 251);
background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
box-shadow: 5px 0 0 rgb(0, 204, 255);
cursor: pointer;
position: relative;
}
.anniu::after{
content: 'Aurora Borealis night';
position: absolute;
top: 0;
left: 0;
text-shadow: -5px -2px 0 rgb(0, 183, 255),
5px 2px 0 rgb(0, 255, 115) ;
visibility: hidden;
}
.anniu:hover::after{
animation: san 1s ;
animation-timing-function: steps(1, end);
}
/*
clip-path: inset(20% -5px 60% 0);
clip-path: inset(50% -5px 30% 0);
clip-path: inset(80% -5px 5% 0);
clip-path: inset(0 -5px 80% 0);
*/
@keyframes san{
0%{
clip-path: inset(20% -5px 60% 0);
transform: translate(-6px,5px);
visibility: visible;
}
10%{
clip-path: inset(50% -5px 30% 0);
transform: translate(6px,-5px);
}
20%{
clip-path: inset(20% -5px 60% 0);
transform: translate(5px,0px);
}
30%{
clip-path: inset(80% -5px 5% 0);
transform: translate(-8px,5px);
}
40%{
clip-path: inset(0 -5px 80% 0);
transform: translate(-4px,-3px);
}
50%{
clip-path: inset(50% -5px 30% 0);
transform: translate(-6px,-5px);
}
60%{
clip-path: inset(80% -5px 5% 0);
transform: translate(-7px,5px);
}
70%{
clip-path: inset(0 -5px 80% 0);
transform: translate(3px,6px);
}
80%{
clip-path: inset(50% -5px 30% 0);
transform: translate(5px,5px);
}
90%{
clip-path: inset(20% -5px 60% 0);
transform: translate(6px,-5px);
}
100%{
clip-path: inset(0 -5px 80% 0);
transform: translate(1px,5px);
}
}
</style>
</head>
<body>
<div class="anniu">Aurora Borealis night</div>
</body>
</html>
Суммировать:
Ставьте палец вверх, если помогло~
Другие статьи:Отзывчивый эффект наведения карты html+css Анимация загрузки волны воды html+css Эффект градиента прокрутки панели навигации html+css+js Перелистывание страниц книги html+css 3D стерео альбом html+css Цветная кнопка стримера html+css Помните некоторые сводки свойств css (1) Сводные примечания Sass
подожди подожди.....
Прежде чем писать:
На письме:
После написания:
Кстати, и эта песня очень хороша: Что заставило меня встретить тебя вот так - Бай Ан
пока~