1. Введение
В начале месяца,Разминка CSS3 — переходы и анимация (чтобы получить крутой выпадающий список, аккордеон, бесшовную прокрутку). Кодовая база js также была опубликована дважды, две статьи. Я также написал прогрев CSS3 раньше. Теперь, когда прогрев закончен, пришло время начать инкапсулировать базу кода CSS3. По сравнению с базой кода js, логика базы кода CSS3 проще! Можно сказать, что пока вы размещаете заметку и рендеринг, вы можете позволить всем понять принцип!
Когда я писал базу кода, анимационные эффекты в основном относились к трем проектам с открытым исходным кодом:nec,hover.css,animate.cssКачество этих трех проектов очень высокое, и вам рекомендуется в них разобраться.
Исходный код выложен на github, вы можете его посмотреть, и добро пожаловать!ec-css.
Я указал, что эти три библиотеки предназначены не для того, чтобы каждый брал чужой код, слегка его модифицировал или копировал непосредственно в свой проект, а затем говорил, что это его собственный проект. Я хочу, чтобы каждый смотрел на чужой код, изучал чужие методы реализации, а потом реализовывал их по-своему.Конечно, если добавлять, удалять, модифицировать и проверять чужие проекты до неузнаваемости, лично я Думаю, это можно назвать вашим собственным проектом. ! Подчеркивается, что нельзя напрямую копировать чужой код, помещать его в свой проект, а потом говорить, что он был разработан вами, это неуважение к чужим достижениям и менее полезное для повышения собственного технического уровня. . Я пишу статьи, хотя я также буду давать код, но моя цель - предоставить всем ссылку, я надеюсь, что все получат знания или разойдутся в мыслях и напишу более качественные работы. Я уже говорил это раньше,
我写文章的目的是授人以渔，不是授人以鱼.Другой заключается в том, что если ваша собственная статья или проект ссылается, опирается на код какого-либо проекта и ссылается на него, лучше всего объяснить упоминаемый проект.
утверждение
1. Вы увидите многоПодобно этому, все они являются тегами span, и все стили заданы css.
span{
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
color: #333;
background: #ccc;
min-width: 80px;
padding: 0 10px;
margin: 10px;
}2. Что касается метода именования классов, l означает левый, r — правый, t — верхний, b — нижний, c — центральный, а m — средний. Запомнить
Статья относительно длинная, но в ней всего два пункта, всем читать очень быстро
1. Напишите рабочие эффекты некоторых анимаций наведения и предустановленных анимаций и опубликуйте код.
2. Найдите несколько комбинаций анимации и добавьте бесконечную анимацию, обратную анимацию, будут разные эффекты, и продолжайте учиться, посмотрите, сможете ли вы разработать что-то другое!
2. анимация наведения
Сказав так много, пора вводить текст,
Во-первых, это анимация наведения.Что касается этой концепции, я объясню, что это анимация, запускаемая перемещением мыши вверх, и анимация, которую можно увидеть, когда срабатывает событие наведения мыши! Ниже по типу пишите по порядку!
2-1 Простая анимация
2-1-1 Изменение размера
html
<span class="ech-big">big</span>
<span class="ech-small">small</span>css
.ech-big,.ech-small {
transition: all .4s;
}
.ech-big:hover{
transform: scale(1.2);
}
.ech-small:hover{
transform: scale(.9);
}
2-1-2 Изменение формы
html
<span class="ech-skew-l">skew-l</span>
<span class="ech-skew-r">skew-r</span>
<span class="ech-skew-l-t">skew-l-t</span>
<span class="ech-skew-r-t">skew-r-t</span>
<span class="ech-skew-l-b">skew-l-b</span>
<span class="ech-skew-r-b">skew-r-b</span>css
.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{
transition: all .4s;
}
.ech-skew-r-t, .ech-skew-l-t {
transform-origin: 0 100%;
}
.ech-skew-r-b, .ech-skew-l-b {
transform-origin: 100% 0;
}
.ech-skew-l:hover {
transform: skew(-15deg);
}
.ech-skew-r:hover {
transform: skew(15deg);
}
.ech-skew-l-t:hover {
transform: skew(-15deg);
}
.ech-skew-r-t:hover {
transform: skew(15deg);
}
.ech-skew-l-b:hover {
transform: skew(15deg);
}
.ech-skew-r-b:hover {
transform: skew(-15deg);
}
2-1-3 Изменение угла поворота
html
<span class="ech-grow-rotate-l">grow-rotate-l</span>
<span class="ech-grow-rotate-r">grow-rotate-r</span>
<span class="ech-rotate5">rotate5</span>
<span class="ech-rotate15">rotate15</span>
<span class="ech-rotate30">rotate30</span>
<span class="ech-rotate60">rotate60</span>
<span class="ech-rotate90">rotate90</span>
<span class="ech-rotate180">rotate180</span>
<span class="ech-rotate360">rotate360</span>
<span class="ech-rotate-5">rotate-5</span>
<span class="ech-rotate-15">rotate-15</span>
<span class="ech-rotate-30">rotate-30</span>
<span class="ech-rotate-60">rotate-60</span>
<span class="ech-rotate-90">rotate-90</span>
<span class="ech-rotate-180">rotate-180</span>
css
.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{
transition: all .4s;
}
.ech-grow-rotate-l:hover {
transform: scale(1.1) rotate(4deg);
}
.ech-grow-rotate-r:hover {
transform: scale(1.1) rotate(-4deg);
}
.ech-rotate-5:hover {
transform: rotate(-5deg);
}
.ech-rotate-15:hover {
transform: rotate(-15deg);
}
.ech-rotate-30:hover {
transform: rotate(-30deg);
}
.ech-rotate-60:hover {
transform: rotate(-60deg);
}
.ech-rotate-90:hover {
transform: rotate(-90deg);
}
.ech-rotate-180:hover {
transform: rotate(-180deg);
}
.ech-rotate5:hover {
transform: rotate(5deg);
}
.ech-rotate15:hover {
transform: rotate(15deg);
}
.ech-rotate30:hover {
transform: rotate(30deg);
}
.ech-rotate60:hover {
transform: rotate(60deg);
}
.ech-rotate90:hover {
transform: rotate(90deg);
}
.ech-rotate180:hover {
transform: rotate(180deg);
}
.ech-rotate360:hover {
transform: rotate(360deg);
}2-1-4 Изменение рабочего объема
html
<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>css
.ech-t,.ech-bottom,.ech-top,.ech-right{
transition: all .4s;
}
.ech-t:hover {
transform: translate3d(0, -10px, 0);
}
.ech-b:hover {
transform: translate3d(0, 10px, 0);
}
.ech-l:hover {
transform: translate3d(-10px, 0, 0);
}
.ech-r:hover {
transform: translate3d(10px, 0, 0);
}
2-1-5 Изменение границы
html
<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>css
.ech-border,.ech-border-in{
transition: all .4s;
}
.ech-border:hover {
box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}
.ech-border-in:hover {
box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}2-1-6 Смена тени
(Эффект gif-изображения слишком уродлив, вы можете зайти на github, чтобы скачать его)
html
<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-write">shadow-write</span>
<span class="ech-shadow-big">shadow-big</span>css
.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
transition: all .4s;
}
.ech-shadow:hover {
box-shadow: 0 0 10px #333;
}
.ech-shadow-in:hover {
box-shadow: inset 0 0 10px #333;
}
.ech-shadow-write:hover {
box-shadow: inset 0 0 20px #fff;
}
.ech-shadow-big:hover {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}2-1-7 Изменение прозрачности
html
<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>css
.ech-fade-out,.ech-fade-in{
transition: all .4s;
}
.ech-fade-out:hover {
opacity: .6;
}
.ech-fade-in {
opacity: .5;
}
.ech-fade-in:hover {
opacity: 1;
} 2-1-8 Вариант с закругленными углами
html
<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>css
.ech-radius,.ech-rectangle{
transition: all .4s;
}
.ech-radius {
border-radius: 10px;
}
.ech-radius:hover {
border-radius: 0;
}
.ech-rectangle:hover {
border-radius: 10px;
}
2-2 Эффект цветовой анимации
Эта часть анимации в основном реализована с использованием :before и :after, поэтому, если вы ее используете, помните, что :before и :after не заняты, иначе она будет отображаться неправильно.
2-2-1.Смена цветового блока
Поскольку этот фрагмент контента очень похож, я буду говорить о большом фрагменте вместе, и всем следует обращать внимание при чтении кода. Если вы не можете понять код, загрузите его прямо с github, затем запустите файл и оцените результат во время отладки! Это облегчит понимание для всех!
html
<span class="ech-fade">fade</span>
<span class="ech-fade-t">fade-t</span>
<span class="ech-fade-b">fade-b</span>
<span class="ech-fade-l">fade-l</span>
<span class="ech-fade-r">fade-r</span>
<span class="ech-bounce-t">bounce-t</span>
<span class="ech-bounce-b">bounce-b</span>
<span class="ech-bounce-l">bounce-l</span>
<span class="ech-bounce-r">bounce-r</span>
<span class="ech-fade-c-out">fade-c-out</span>
<span class="ech-fade-c-in">fade-c-in</span>
<span class="ech-fade-m-out">fade-m-out</span>
<span class="ech-fade-m-in">fade-m-in</span>css
/*当前元素设置相对定位*/
.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l {
position: relative;
transition: all .3s;
z-index: 1;
}
/*当前元素的:before和:after设置绝对定位*/
.ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before {
position: absolute;
transition: all .3s;
content: "";
display: block;
background: #09f;
z-index: -1;
width: 100%;
height: 100%;
}
/*弹跳元素:before和:after设置绝对定位和运动曲线*/
.ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before {
transition: all .3s;
transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
position: absolute;
content: "";
display: block;
background: #09f;
z-index: -1;
width: 100%;
height: 100%;
}
/*背景颜色和文字变化*/
.ech-fade:before {
top: 0;
left: 0;
transform: scaleX(1);
opacity: 0;
}
.ech-fade:hover:before {
opacity: 1;
}
/*颜色从左至右变化*/
.ech-fade-l:before, .ech-bounce-l:before {
top: 0;
right: 0;
transform-origin: 0 50%;
transform: scaleX(0);
}
/*颜色从右至左变化*/
.ech-fade-r:before, .ech-bounce-r:before {
top: 0;
left: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
/*颜色从上往下变化*/
.ech-fade-t:before, .ech-bounce-t:before {
bottom: 0;
left: 0;
transform-origin: 50% 0;
transform: scaleY(0);
}
/*颜色从下往上变化*/
.ech-fade-b:before, .ech-bounce-b:before {
top: 0;
left: 0;
transform-origin: 50% 100%;
transform: scaleY(0);
}
/*颜色垂直居中出去*/
.ech-fade-m-out:before {
top: 0;
bottom: 0;
left: 0;
margin: auto;
transform: scaleY(0);
}
/*水平居中出去*/
.ech-fade-c-out:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transform: scaleX(0);
}
.ech-fade-c-out:hover:before {
transform: scaleX(1);
}
/*水平居中进来*/
.ech-fade-c-in:before {
top: 0;
left: 0;
transform-origin: 0 50%;
transform: scaleX(0);
}
.ech-fade-c-in:after {
top: 0;
right: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
/*垂直居中进来*/
.ech-fade-m-in:before {
top: 0;
left: 0;
transform-origin: 50% 0;
transform: scaleY(0);
}
.ech-fade-m-in:after {
bottom: 0;
left: 0;
transform-origin: 50% 100%;
transform: scaleY(0);
}
/*当前元素文字颜色变化*/
.ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover {
color: #fff;
}
/*垂直方向进来的:before变化（一半）*/
.ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after {
transform: scaleY(.51);
}
/*垂直方向进来的:before变化*/
.ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before {
transform: scaleY(1);
}
/*水平方向进来的:before变化（一半）*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after {
transform: scaleX(.51);
}
/*水平方向进来的:before变化*/
.ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before {
transform: scaleX(1);
} 2-2-2 Изменение цвета подчеркивания
Здесь также стоит отметить, что просмотр кода может быть более запутанным, поэтому каждый должен уделять больше внимания при просмотре кода. Если вы не можете понять код, загрузите его прямо с github, затем запустите файл и оцените результат во время отладки! Это облегчит понимание для всех!
html
<span class="ech-overline-l">overline-l</span>
<span class="ech-overline-r">overline-r</span>
<span class="ech-underline-l">underline-l</span>
<span class="ech-underline-r">underline-r</span>
<span class="ech-underline-c">underline-c</span>
<span class="ech-underline-c-out">underline-c-out</span>
<span class="ech-overline-c">overline-c</span>
<span class="ech-overline-c-out">overline-c-out</span>css
/*上划线和下划线变化 当前元素样式设置相对定位*/
.ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{
position: relative;
transition: all .3s;
z-index: 1;
}
/*初始化:after:before大小和绝对定位*/
.ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before {
position: absolute;
transition: all .3s;
content: "";
display: block;
background: #09f;
z-index: -1;
height: 4px;
width: 100%;
transform: scaleX(0);
}
/*上划线 左右出来*/
.ech-overline-r:before {
top: 0;
left: 0;
transform-origin: 100% 50%;
}
.ech-overline-l:before {
top: 0;
right: 0;
transform-origin: 0 50%;
}
/*下划线 左右出来*/
.ech-underline-r:before {
bottom: 0;
left: 0;
transform-origin: 100% 50%;
}
.ech-underline-l:before {
bottom: 0;
right: 0;
transform-origin: 0% 50%;
}
/**上划线 下划线 居中进来**/
.ech-overline-c:before {
top: 0;
transform-origin: 0 50%;
}
.ech-overline-c:after {
top: 0;
transform-origin: 100% 50%;
}
.ech-underline-c:before {
bottom: 0;
transform-origin: 0 50%;
}
.ech-underline-c:after {
bottom: 0;
transform-origin: 100% 50%;
}
.ech-overline-c:before, .ech-underline-c:before {
left: 0;
}
.ech-overline-c:after, .ech-underline-c:after {
right: 0;
}
/*上划线 下划线-居中出去 */
.ech-overline-c-out:before {
top: 0;
left: 0;
right: 0;
margin: auto;
}
.ech-underline-c-out:before {
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*hover效果*/
.ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before {
transform: scaleX(.51);
}
.ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before {
transform: scaleX(1);
}
2-2-3 Анимация стрелки
html
<span class="ech-arrow-l">arrow-l</span>
<span class="ech-arrow-r">arrow-r</span>
<span class="ech-arrow-t">arrow-t</span>
<span class="ech-arrow-b">arrow-b</span>
<span class="ech-arrow-l-move">arrow-l</span>
<span class="ech-arrow-r-move">arrow-r</span>
<span class="ech-arrow-t-move">arrow-t</span>
<span class="ech-arrow-b-move">arrow-b</span>
css
.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{
position: relative;
transition: all .3s;
z-index: 1;
}
/*初始化箭头样式*/
.ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before {
position: absolute;
transition: all .3s;
content: "";
display: block;
z-index: -1;
border-style: solid;
margin: auto;
width: 0;
height: 0;
}
.ech-arrow-l:before, .ech-arrow-l-move:before {
left: 0;
top: 0;
bottom: 0;
border-width: 10px 10px 10px 0;
border-color: transparent #ccc transparent transparent;
}
.ech-arrow-r:before, .ech-arrow-r-move:before {
right: 0;
top: 0;
bottom: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #ccc;
}
.ech-arrow-t:before, .ech-arrow-t-move:before {
left: 0;
top: 0;
right: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #ccc transparent;
}
.ech-arrow-b:before, .ech-arrow-b-move:before {
left: 0;
bottom: 0;
right: 0;
border-width: 10px 10px 0 10px;
border-color: #ccc transparent transparent transparent;
}
.ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move {
transition: transform .3s;
}
/*hover效果*/
.ech-arrow-l-move:hover {
transform: translateX(10px);
}
.ech-arrow-r-move:hover {
transform: translateX(-10px);
}
.ech-arrow-t-move:hover {
transform: translateY(10px);
}
.ech-arrow-b-move:hover {
transform: translateY(-10px);
}
.ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before {
transform: translateX(-10px);
}
.ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before {
transform: translateX(10px);
}
.ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before {
transform: translateY(-10px);
}
.ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before {
transform: translateY(10px);
}
2-3 более сложные анимации
Контент 2-1 и 2-2 использует переходы для достижения эффектов, поэтому в этой части используется анимация для достижения эффектов! Отличие в том, что hover пишется путем добавления анимации, упаковки анимации, сложность заключается в творчестве.
2-3-1 Эффект мерцания
html
<span class="ech-flash">flash</span>css
.ech-flash:hover {
animation: flash .5s ease;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
2-3-2 Эффект звонка будильника
html
<span class="ech-shake-time">shake-time</span>css
/*仿闹钟振铃效果*/
.ech-shake-time:hover {
animation: shake-time 1s ease;
}
@keyframes shake-time {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
Эффект качания 2-3-3
html
<span class="ech-wobble-c">wobble-c</span>
<span class="ech-wobble-t">wobble-t</span>
<span class="ech-wobble-b">wobble-b</span>css
.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t {
transform-origin: 0 100%;
}
.ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b {
transform-origin: 100% 0;
}
.ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover {
animation: wobble-x 1s ease-in-out;
}
@keyframes wobble-x {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
Эффект встряхивания 2-3-4
html
<span class="ech-swing">swing</span>css
.ech-swing:hover {
animation: swing .5s ease alternate;
}
@keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
Эффект джиттера 2-3-5
html
<span class="ech-shake">shake</span>css
.ech-shake:hover {
animation: shake .5s ease;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
2-3-6 Эффект отскока
html
<span class="ech-bounce">bounce</span>css
.ech-bounce:hover {
animation: bounce 1s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
3. Предустановленные анимации
Ограниченный размером места, я не хочу писать две отдельные статьи. По поводу этой предустановленной анимации, я о ней вкратце расскажу, напишу, а прямо дам общую демонстрацию работы и полный код! В любом случае, метод написания относительно прост, это не что иное, как изменение имени класса. Сложная часть — это написание анимации, которая требует творческого подхода, и вы можете сослаться на нее в Интернете.
（完整代码比较多，这里贴出，但是建议大家稍微看一下，过一下就好，因为这个只看代码是会懵逼的，要在浏览器打开文件，一看调试一边看，这样会很简单，很容易的明白）
HTML-код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="ec-css2.css">
<style>
.big {
width: 500px;
height: 500px;
border: 1px solid #ccc;
margin: 100px auto 0 auto;
}
#demo {
width: 200px;
height: 100px;
margin: 200px auto;
background: #09f;
}
.btn-box {
margin: 0 auto 100px auto;
max-width: 1200px;
font-size: 0;
}
.btn-box a {
font-size: 16px;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 6px;
color: #333;
background: #ccc;
margin: 0 0 10px 10px;
}
.btn-box .cur{
background: #09f;
color: #fff;
}
.an-type{
width: 500px;
height: 100px;
margin: 0 auto;
}
.an-type a{
font-size: 16px;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 6px;
color: #333;
background: #ccc;
margin: 0 10px 10px 0;
}
.an-type .cur{
background: #09f;
color: #fff;
}
</style>
</head>
<body>
<div class="big">
<div class="" id="demo"></div>
</div>
<div class="an-type">
<a href="javascripr:;" data-class="ec-infinite" id="infinite">infinite</a>
<a href="javascripr:;" data-class="ec-alternate" id="alternate">alternate</a>
<a href="javascripr:;" id="stop">stop</a>
</div>
<div class="btn-box">
<a href="javascripr:;" data-class="ec-bounce" class="an-a">bounce</a>
<a href="javascripr:;" data-class="ec-bounce-in-b" class="an-a">bounce-in-b</a>
<a href="javascripr:;" data-class="ec-bounce-in-l" class="an-a">bounce-in-l</a>
<a href="javascripr:;" data-class="ec-bounce-in-t" class="an-a">bounce-in-t</a>
<a href="javascripr:;" data-class="ec-bounce-in-r" class="an-a">bounce-in-r</a>
<a href="javascripr:;" data-class="ec-bounce-out-b" class="an-a">bounce-out-b</a>
<a href="javascripr:;" data-class="ec-bounce-out-l" class="an-a">bounce-out-l</a>
<a href="javascripr:;" data-class="ec-bounce-out-t" class="an-a">bounce-out-t</a>
<a href="javascripr:;" data-class="ec-bounce-out-r" class="an-a">bounce-out-r</a>
<br/>
<a href="javascripr:;" data-class="ec-wobble" class="an-a">wobble</a>
<a href="javascripr:;" data-class="ec-wobble-t" class="an-a">wobble-t</a>
<a href="javascripr:;" data-class="ec-wobble-b" class="an-a">wobble-b</a>
<br/>
<a href="javascripr:;" data-class="ec-fade-in" class="an-a">fade-in</a>
<a href="javascripr:;" data-class="ec-fade-in-t" class="an-a">fade-in-t</a>
<a href="javascripr:;" data-class="ec-fade-in-b" class="an-a">fade-in-b</a>
<a href="javascripr:;" data-class="ec-fade-in-l" class="an-a">fade-in-l</a>
<a href="javascripr:;" data-class="ec-fade-in-r" class="an-a">fade-in-r</a>
<a href="javascripr:;" data-class="ec-fade-out" class="an-a">fade-out</a>
<a href="javascripr:;" data-class="ec-fade-out-t" class="an-a">fade-out-t</a>
<a href="javascripr:;" data-class="ec-fade-out-b" class="an-a">fade-out-b</a>
<a href="javascripr:;" data-class="ec-fade-out-l" class="an-a">fade-out-l</a>
<a href="javascripr:;" data-class="ec-fade-out-r" class="an-a">fade-out-r</a>
<br/>
<a href="javascripr:;" data-class="ec-rotate-in" class="an-a">rotate-in</a>
<a href="javascripr:;" data-class="ec-rotate-in-rb" class="an-a">rotate-in-rb</a>
<a href="javascripr:;" data-class="ec-rotate-in-rt" class="an-a">rotate-in-rt</a>
<a href="javascripr:;" data-class="ec-rotate-in-lb" class="an-a">rotate-in-lb</a>
<a href="javascripr:;" data-class="ec-rotate-in-lt" class="an-a">rotate-in-lt</a>
<a href="javascripr:;" data-class="ec-rotate-out" class="an-a">rotate-out</a>
<a href="javascripr:;" data-class="ec-rotate-out-rb" class="an-a">rotate-out-rb</a>
<a href="javascripr:;" data-class="ec-rotate-out-rt" class="an-a">rotate-out-rt</a>
<a href="javascripr:;" data-class="ec-rotate-out-lb" class="an-a">rotate-out-lb</a>
<a href="javascripr:;" data-class="ec-rotate-out-lt" class="an-a">rotate-out-lt</a>
<br/>
<a href="javascripr:;" data-class="ec-flip-in-x" class="an-a">flip-in-x</a>
<a href="javascripr:;" data-class="ec-flip-in-y" class="an-a">flip-in-y</a>
<a href="javascripr:;" data-class="ec-flip-out-x" class="an-a">flip-out-x</a>
<a href="javascripr:;" data-class="ec-flip-out-y" class="an-a">flip-out-y</a>
<br/>
<a href="javascripr:;" data-class="ec-light-speed-in" class="an-a">light-speed-in</a>
<a href="javascripr:;" data-class="ec-light-speed-out" class="an-a">light-speed-out</a>
<br/>
<a href="javascripr:;" data-class="ec-shake-time" class="an-a">shake-time</a>
<a href="javascripr:;" data-class="ec-flash" class="an-a">flash</a>
<a href="javascripr:;" data-class="ec-rubber-band" class="an-a">rubber-band</a>
<a href="javascripr:;" data-class="ec-rubber-band-fast" class="an-a">rubber-band-fast</a>
<a href="javascripr:;" data-class="ec-swing" class="an-a">swing</a>
<a href="javascripr:;" data-class="ec-shake" class="an-a">shake</a>
<a href="javascripr:;" data-class="ec-pulse-shrink" class="an-a">pulse-shrink</a>
<a href="javascripr:;" data-class="ec-pulse" class="an-a">pulse</a>
</div>
</body>
<script src="ec-do.js"></script>
<script type="text/javascript">
window.onload = function () {
var oDivDemo = document.getElementById("demo"),
oDivBox = document.getElementsByClassName("btn-box")[0],
oAan=oDivBox.getElementsByTagName("a"),
oInfinite=document.getElementById("infinite"),_infinite=false,
oAlternate=document.getElementById("alternate"),_alternate=false,
oStop=document.getElementById("stop");
oStop.addEventListener("click",function(){
oDivDemo.className="";
_infinite=false;
_alternate=false;
ecDo.removeClass(oInfinite,"cur");
ecDo.removeClass(oAlternate,"cur");
ecDo.removeClass(oAan,"cur");
})
oInfinite.addEventListener("click",function(){
_infinite=!_infinite;
if(_infinite){
ecDo.addClass(oInfinite,"cur")
ecDo.addClass(oDivDemo,"ec-infinite");
}
else{
ecDo.removeClass(oInfinite,"cur")
ecDo.removeClass(oDivDemo,"ec-infinite");
}
})
oAlternate.addEventListener("click",function(){
_alternate=!_alternate;
if(_alternate){
ecDo.addClass(oAlternate,"cur")
ecDo.addClass(oDivDemo,"ec-alternate");
}
else{
ecDo.removeClass(oAlternate,"cur")
ecDo.removeClass(oDivDemo,"ec-alternate");
}
})
oDivBox.addEventListener("click", function (e) {
var e = e || window.event;
var target = e.target || e.srcElement, _class = "";
if (target.nodeName.toLowerCase() === 'a') {
ecDo.addClass(target,"cur");
ecDo.removeClass(ecDo.siblings(target,"a"),"cur")
_class =target.getAttribute("data-class");
oDivDemo.className = "";
setTimeout(function () {
ecDo.addClass(oDivDemo,_class);
if(_infinite){
ecDo.addClass(oDivDemo,"ec-infinite");
}
else{
ecDo.removeClass(oDivDemo,"ec-infinite");
}
if(_alternate){
ecDo.addClass(oDivDemo,"ec-alternate");
}
else{
ecDo.removeClass(oDivDemo,"ec-alternate");
}
}, 50)
}
})
}
</script>
</html>css
/*动画效果*/
.ec-bounce-in-l {
animation: bounce-in-l 1s ease;
}
@keyframes bounce-in-l {
0%, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0)
}
75% {
transform: translate3d(-10px, 0, 0)
}
90% {
transform: translate3d(5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
.ec-bounce-in-r {
animation: bounce-in-r 1s ease;
}
@keyframes bounce-in-r {
0%, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0)
}
75% {
transform: translate3d(10px, 0, 0)
}
90% {
transform: translate3d(-5px, 0, 0)
}
to {
-webkit-transform: none;
transform: none
}
}
.ec-bounce-in-b{
animation: bounce-in-b 1s;
}
.ec-bounce-in-t{
animation: bounce-in-t 1s;
}
@keyframes bounce-in-t {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
@keyframes bounce-in-b{
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -25px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: none;
}
}
@keyframes bounce-out-b {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.ec-bounce-out-b {
animation: bounce-out-b 1s;
}
@keyframes bounce-out-l {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.ec-bounce-out-l {
animation: bounce-out-l 1s;
}
@keyframes bounce-out-r {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.ec-bounce-out-r {
animation: bounce-out-r 1s;
}
@keyframes bounce-out-t {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.ec-bounce-out-t {
animation: bounce-out-t 1s;
}
/*心跳效果*/
.ec-pulse {
animation: pulse 1s linear;
}
.ec-pulse-shrink {
animation: pulse .5s linear;
}
@keyframes pulse {
25% {
transform: scale(1.1);
}
75% {
transform: scale(0.9);
}
}
.ec-flash {
animation: flash .5s ease;
}
/*摇摆*/
.ec-swing {
animation: swing .5s ease;
}
@keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
/*摇摆*/
.ec-wobble-t{
transform-origin: 0 100%;
}
.ec-wobble-b{
transform-origin: 100% 0;
}
.ec-wobble,.ec-wobble-t,.ec-wobble-b {
animation: wobblex 1s ease-in-out;
}
@keyframes wobblex {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
/*闪烁*/
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.ec-rubber-band {
animation: rubber-band 1s;
}
.ec-rubber-band-fast {
animation: rubber-band .5s;
}
@keyframes rubber-band {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
/*仿闹钟振铃效果*/
.ec-shake-time{
animation: shake-time 1s ease;
}
@keyframes shake-time {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
/*弹跳变化*/
.ec-bounce{
animation: bounce 1s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/*震动*/
.ec-shake {
animation: shake .5s ease;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
/*透明度进入*/
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ec-fade-in {
animation: fade-in 1s;
}
@keyframes ec-fade-in-b {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-b {
animation: ec-fade-in-b 1s;
}
@keyframes ec-fade-in-l {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-l {
animation: ec-fade-in-l 1s;
}
@keyframes ec-fade-in-r {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-r {
animation: ec-fade-in-r 1s;
}
@keyframes ec-fade-in-t {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.ec-fade-in-t {
animation: ec-fade-in-t 1s;
}
@keyframes ec-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.ec-fade-out {
animation: ec-fade-out 1s;
}
@keyframes ec-fade-out-b {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.ec-fade-out-b {
animation: ec-fade-out-b 1s;
}
@keyframes ec-fade-out-l {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.ec-fade-out-l {
animation: ec-fade-out-l 1s;
}
@keyframes ec-fade-out-r {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
.ec-fade-out-r {
animation: ec-fade-out-r 1s;
}
@keyframes ec-fade-out-t {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.ec-fade-out-t {
animation: ec-fade-out-t 1s;
}
/*旋转进出*/
@keyframes rotate-in{
0%{opacity:0;transform:rotate(-200deg);}
100%{opacity:1;transform:rotate(0);}
}
.ec-rotate-in {
animation: rotate-in 1s;
}
@keyframes rotate-in-lt{
0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lt {
animation: rotate-in-lt 1s;
}
@keyframes rotate-in-lb{
0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lb {
animation: rotate-in-lb 1s;
}
@keyframes rotate-in-rt{
0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rt {
animation: rotate-in-rt 1s;
}
@keyframes rotate-in-rb{
0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rb {
animation: rotate-in-rb 1s;
}
.ec-rotate-out {
animation: rotate-out 1s;
}
@keyframes rotate-out{
0%{transform-origin:center center;transform:rotate(0);opacity:1;}
100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.ec-rotate-out-lt {
animation: rotate-out-lt 1s;
}
@keyframes rotate-out-lt{
0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.ec-rotate-out-lb {
animation: rotate-out-lb 1s;
}
@keyframes rotate-out-lb{
0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rt {
animation: rotate-out-rt 1s;
}
@keyframes rotate-out-rt{
0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rb {
animation: rotate-out-rb 1s;
}
@keyframes rotate-out-rb{
0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/*翻转进出*/
@keyframes flip-in-x {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.ec-flip-in-x {
animation: flip-in-x 1s;
}
@keyframes flip-in-y {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.ec-flip-in-y {
animation: flip-in-y 1s;
}
@keyframes flip-out-x {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.ec-flip-out-x {
animation: flip-out-x 1s;
}
@keyframes flip-out-y {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.ec-flip-out-y {
animation: flip-out-y 1s;
}
@keyframes light-speed-in {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
.ec-light-speed-in {
animation: light-speed-in 1s ease-out;
}
@keyframes light-speed-out {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.ec-light-speed-out {
animation: light-speed-out ease-in 1s;
}
/*无限次数执行动画*/
.ec-infinite{
animation-iteration-count: infinite;
}
.ec-alternate {
animation-direction: alternate;
}4. Неизвестная разведка
Ну и после разговора о ховер анимациях и предустановленных анимациях, когда я разрабатывал, то наткнулся на вот такие интересные штуки, я тоже собираюсь продолжать это изучать, а так же предлагаю вам поиграть, может быть когда-нибудь вы сделаете что-то потрясающее ! Такие, как каштаны ниже!
Упомянутая ниже анимация, независимо от анимации наведения и предустановленной анимации, обратите внимание
4-1. Бесконечная анимация выполнения
Обычная анимация вкупе с бесконечным исполнением вообще очень дружелюбно действует,
Но иногда эффект неудовлетворительный
4-2. Обратная анимация
На основе 4-1 добавление направления для выполнения анимации также будет иметь разные эффекты.
Нет обратной анимации
Добавить эффект обратной анимации
4-3 Комбинированный эффект
Комбинация эффекта тени и других эффектов (gif не может видеть эффект тени, эй..)
Несколько каштанов сверху
Код css не изменился, разница только в html коде и добавлено еще несколько имен классов
Вышеупомянутые каштаны я обнаружил во время разработки.Я буду продолжать изучать это, и я надеюсь, что каждый сможет изучить его и узнать какие-то интересные эффекты или методы написания анимации.Добро пожаловать, чтобы поделиться!
5. Выбор куриных ребрышек
При написании кодовой базы css3 я также обнаружил безвкусную ситуацию с инкапсуляцией css3.
1. Эффекты css3 слишком гибки и разнообразны, а инкапсуляцию очень просто сложно настроить, и эффект от каждого проекта может быть похожим, но он разный, а значит инкапсулированная библиотека не пригодна для использования в проектах.
2. Еще один момент заключается в том, что эффект css3 в основном полезен для каждого проекта и широко используется, но эффект css3, используемый в обычном проекте, составляет не более 10, и это не сложно, и его можно быстро реализовать от руки. Нет необходимости включать плагин или библиотеку.
Но в конце концов я настоял на написании по следующим причинам:
1. Если проект будет разрабатываться, то требования к анимационным эффектам не будут достигать очень строгого уровня.Я могу полностью привести еще один файл для повышения эффективности моей разработки.Сжатый файл может быть только около 10К, что приемлемо.
2. Даже если я не использую его в проекте, я также могу использовать его в качестве обучающей роли. Если в будущем проекту потребуются анимационные эффекты, даже если анимационные эффекты не совпадают с тем, что я инкапсулировал, я могу посмотреть и изменить их.
3. Даже если эта библиотека не используется при разработке, на случай, если есть какие-то анимации, я их написал, но забыл, как их писать, и вы можете оглянуться назад и посмотреть, как их реализовать!
4. Если вы не знаете, что хорошо работает при разработке, эта библиотека тоже может сыграть некую эталонную роль!
5. Теперь напишу еще несколько, может это сыграет роль в дивергентном мышлении.После написания этих эффектов думаю как написать другие эффекты, или думаю другие эффекты написать, это тоже очень хороший результат и урожай!
6. Резюме
Ну и кодовая база css3 здесь почти инкапсулирована.Если вы можете прочитать всю статью, вы уже воин, что доказывает, что вы очень терпеливы.Прочитав ее, вы можете сразу ее освоить.Это не большая проблема для каждый, в конце концов, это ничто Логический код. Хотя эффект, который я хочу, достигнут, его обязательно нужно будет доработать и улучшить в будущем (по крайней мере, если я смотрю исходный код, я вижу, что он немного беспорядочный, но я не знаю, как с этим разобраться на какое-то время, поэтому я выложил его первым). Сказав, что в вышеупомянутых случаях я надеюсь помочь всем, в идеале играть роль дивергентного мышления, то есть в моем случае я могу сообщить вам, как делать другие анимации, или придумать какую-нибудь хорошую анимацию. эффекты. Во фронтенде самое главное больше практиковаться.Помимо чтения чужих проектов и блогов, каждый должен больше практиковаться и писать, чтобы прогресс был быстрее, а знания запомнились крепче.
Наконец, если вы считаете, что я написал что-то не так или не так, пожалуйста, укажите на это. Если у вас есть хорошие идеи, не стесняйтесь дать мне ценный совет! Я также выложил проект на github! Вы можете взглянуть, если вам это нужно, звездаec-css!
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина