Соси кошек вместе с кодом! Эта статья участвует【Эссе "Мяу Звезды"】.
представлять
В этом выпуске мы используем vite+scss для создания креативной анимации смены настроения оранжевого кота. Мы не будем использовать здесь какой-либо js-код, а будем полагаться только на css для завершения логики. Поэтому с помощью анимации в этом выпуске вы можете получить некоторые анимации css и некоторые навыки рисования. Не много чепухи, первый эффект Канкана~
Довольно милый. Когда мышь (рыба) движется туда-сюда, апельсин угрюм и вял. Но когда мышь (рыбка) вселилась, апельсин сразу же обрадовался, увидев свою любимую рыбку, и даже погода наладилась.Да, этот апельсин такой жадный, и не зря же он стал толстым апельсином.
Ну а мы вот-вот приступим к основному тексту, разберемся в процессе создания этой анимации из базовой конструкции, рисования и анимации солнца, облаков и кошек.
текст
1. Конструкция и структура
yarn add vite sass sass-loader
Мы используем vite и sass для завершения построения проекта и написания стилей, поэтому давайте сначала установим их.
<div id="app">
<div class="warrper">
<div class="sun"></div>
<div class="cloud"></div>
<div class="cat">
<div class="eye left"><div class="eye-hide"></div></div>
<div class="eye right"><div class="eye-hide"></div></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
</div>
</div>
В html мы сначала пишем структуру. div#app используется в качестве основного интерфейса для заполнения экрана, а div.warrper используется в качестве области отображения основного контента, то есть круга. Затем по кругу помещаем солнце div.sun, облако div.cloud, кот div.cat, естественно, у кота тоже есть глаза, нос и рот.Что касается кошачьих ушей, то используем два псевдокласса чтобы сделать треугольник, чтобы достичь этого.
2. Переменные и интерфейсы
$cat:rgb(252, 180, 125);
:root{
--bgColor:rgb(81, 136, 168);
--eyeHideTop:0px;
--cloudLeft:45%;
--mouthRadius:10px 10px 0 0;
}
#app{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-image: repeating-linear-gradient(0deg, hsla(340,87%,75%,0.2) 0px, hsla(340,87%,75%,0.2) 30px,transparent 30px, transparent 60px),repeating-linear-gradient(90deg, hsla(340,87%,75%,0.2) 0px, hsla(340,87%,75%,0.2) 30px,transparent 30px, transparent 60px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}
.warrper{
width: 320px;
height: 320px;
border-radius: 50%;
border: 10px solid white;
position: relative;
overflow: hidden;
background-color: var(--bgColor);
transition: background-color 1s linear;
cursor:url("./assets/fish.png"),default;
&:hover{
--bgColor:rgb(178, 222, 247);
--eyeHideTop:-20px;
--cloudLeft:100%;
--mouthRadius:0 0 10px 10px;
}
}
Сначала мы определяем основной цвет кота, а также некоторые цвета и расстояния, которые нужно изменить, потому что мы изменим эти свойства с помощью CSS3, чтобы добиться некоторой анимации.
Мы ожидаем, что когда мышь движется по кругу, небо становится ясным, облака отступают, а кошка счастлива и полна энергии, поэтому bgColor: цвет неба, eyeHideTop расстояние до века по оси Y кошки, cloudLeft Расстояние смещения по оси X облака, рот Радиус кошачьего рта Угловое значение. В настоящее время эти значения меняются при перемещении мыши в div.warrper. Кроме того, я настроил значок мыши, чтобы он перемещался по кругу и превращался в рыбу (т.е. курсор: url (адрес изображения)). Значение после ховера здесь я рассчитываю заранее, если вы переделываете другие анимации, то можете сделать расчет при этом.
3. Солнце и облака
.sun{
width: 50px;
height: 50px;
position: absolute;
background-color: rgb(255, 229, 142);
border:7px solid rgb(253, 215, 91);
border-radius: 50%;
left: 55%;
top: 14%;
box-shadow: 0 0 6px rgb(255, 241, 48);
}
Для солнца мы нарисуем круг, чтобы задать положение, а затем воспользуемся проекцией box-shadow, чтобы добавить небольшой эффект свечения.
Тогда давайте начнем рисовать облака~
.cloud{
width: 100px;
height: 36px;
background-color: white;
position: absolute;
transition: left .6s linear;
left: var(--cloudLeft);
top: 23%;
border-radius: 36px;
animation: bouncy 2s ease-in-out infinite;
&::before{
content: '';
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
position: absolute;
top: -23px;
left: 18px;
}
&::after{
content: '';
width: 26px;
height: 26px;
background-color: white;
border-radius: 50%;
position: absolute;
top: -16px;
left: 56px;
}
}
@keyframes bouncy {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
Облако очень простое.Мы просто рисуем прямоугольник со скругленными углами, а затем используем два псевдокласса для рисования большого круга и маленького круга, который очень похож на облако.Кроме того, мы добавляем анимацию анимации, чтобы сделать его больше и меньше, есть ощущение движения.
4. Оранжевый кот и анимация
.cat{
width: 180px;
height: 160px;
background-color: $cat;
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -90px;
animation: wait 2s ease-in-out infinite;
&::after,
&::before{
content: '';
display: block;
border-style: solid;
border-width: 20px 30px;
position: absolute;
top: -30px;
}
&::after{
right: 0;
border-color: transparent $cat $cat transparent;
}
&::before{
left: 0;
border-color: transparent transparent $cat $cat;
}
.eye{
width: 42px;
height: 42px;
border-radius: 50%;
position: absolute;
top: 30px;
background:white;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.eye-hide{
height: 20px;
position: absolute;
top: var(--eyeHideTop);
left: -2px;
right:-2px;
background-color: $cat;
transition: top .5s ease-in-out;
z-index: 2;
}
&::before{
content: "";
height: 36px;
width: 36px;
background-color:black;
border-radius: 50%;
}
&::after{
content: "";
width: 24px;
height: 24px;
background-color: white;
border-radius: 50%;
position: absolute;
right: 0px;
top: 0px;
}
&.left{
left: 24px;
}
&.right{
right: 24px;
}
}
.nose{
width: 0;
height: 0;
border-top: 7px solid rgb(248, 226, 226);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
left: 50%;
margin-left: -7px;
top: 70px;
}
.mouth{
width: 26px;
height: 20px;
background-color: rgb(255, 217, 217);
position: absolute;
top: 85px;
left: 50%;
margin-left: -13px;
border-radius: var(--mouthRadius);
transition: border-radius .2s linear;
overflow: hidden;
&::after,
&::before{
content: "";
position: absolute;
display: block;
top: 0;
border-top: 7px solid white;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
&::after{
right: 5px;
}
&::before{
left: 5px;
}
}
}
@keyframes wait{
0% {
bottom: -20px;
}
50% {
bottom: -25px;
}
100% {
bottom: -20px;
}
}
Можем реализовать разложение, уши (псевдокласс) + пара глаз + нос + рот (включая два клыка) = кошка.
В приведенном выше коде нетрудно увидеть, что в основном это делается с использованием абсолютного позиционирования и размещения лицевых органов. Большинство из них реализовано с помощью базового кода css. Единственный момент, который можно заметить, это треугольник уха.Реализуем его через псевдоклассы, а ширину и высоту не задаем.Главное рисовать треугольник через скилл border-width+boder-color, это трюк css. , нос сзади и клыки во рту достигаются с помощью этого маленького трюка.
Кроме того, я хочу поговорить об этих глазах.Сначала мы используем белый фон, а затем используем псевдоклассы для реализации черного фонового круга и белого маленького круга.Должны быть некоторые студенты, которые спрашивали, почему граница не используется для достижения рамка белого круга Отходы псевдокласса, чтобы завершить черный круг? Поскольку мы использовали overflow: hidden, лишний скрытый контент — это элементы под границей, а рамка рамки может быть повреждена, поэтому его псевдокласс не может покрыть свою границу, поэтому круг с опущенными веками все еще очень большой и Неестественно Поэтому мы создали еще один псевдокласс для реализации его черного фона, чтобы внешний круг не использовал границы.
Осталось сделать анимацию ожидания, чтобы кошка двигалась вверх-вниз, чтобы добиться эффекта безостановочного дыхания.
Таким образом, оранжевая кошка, которая была вялой, завершена. Потому что в первой части мы уже рассчитали переменные, которые изменились после перемещения. Теперь подвиньте мышь, и эффект появится~
Эпилог
Сказав это, мы уже закончили эту анимацию.Я должен сказать, что когда я вижу еду в таком восторге, я называю его Толстый Апельсин!
Вот моя анимация【Мне нравится рыба】Вы можете посмотреть демоверсию и код по адресу codepen, а заинтересованные друзья могут оставаться здоровыми.
Этот выпуск все же больше ориентирован на основы и анимационное творчество, в основном для новичков. Не распыляйтесь на больших парней. Часто писать анимацию на CSS интересно. Давайте учиться, больше практиковаться, давайте усердно работать вместе~