представлять
Недавно мне вдруг вспомнилась анимация, которую я смотрел раньше, это была небольшая анимация куба, выражающего любовь к сфере, отвергаемого и меняющегося.
После долгих поисков я, наконец, нашел его. Лично я считаю, что это отличная анимация. Это сильно Amway:
Предварительный просмотр эффекта
адрес исходного кода
Интерпретация кода
1. Режиссер выходит на сцену
В этой анимации есть переходы кадров, поэтому нам нужен режиссер, чтобы контролировать общую ситуацию и написать простой эффект для тестирования.
СценыloveЗайми свое место, директорdirectorЗаймите свое место, драконыactorsНа месте:
<figure class="love">
<div class="director">
<p class="actors">
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</p>
<p class="actors">
红藕香残玉簟秋。轻解罗裳，独上兰舟。云中谁寄锦书来，雁字回时，月满西楼。
花自飘零水自流。一种相思，两处闲愁。此情无计可消除，才下眉头，却上心头。
</p>
</div>
</figure>
Сцена слишком простая и нуждается в доработке и апгрейде, да и актеров тоже стоит немного украсить:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
width: 100vw;
background-color: #f1f1f1;
overflow: hidden;
}
.love {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 不定宽高垂直居中推荐 flex，此处玩玩而已 */
width: 800px;
height: 500px;
background-color: #b5bfc0;
overflow: hidden;
}
.director {
width: 1200px;
height: 100%;
border: 1px dashed red;
display: flex;
justify-content: space-between;
}
.actors {
width: 45%;
border: 1px solid purple;
}
объективlenПодготовка, директор испытательной машины:
.director {
animation: len 5s linear .2s infinite;
}
@keyframes len {
from {
transform: translateX(0);
}
to {
transform: translateX(-400px);
}
}
Готовый тест.
2. Свиные ножкиcubeдебют
Солдаты ушли со сцены, и появились свиные лапки.
Ноги свиньи должны иметь позу нефритового дерева и ветра. Высота 1,8 метра соответствует небольшому боку. Давайте сначала подойдем к плакату со свиными ногами, чтобы привлечь популярность:
<div class="director">
<header>
<h1 class="title">Cube</h1>
</header>
<section class="cube">
<div class="cube__body">
<div class="cube__face cube__face_front">(❁´▽`❁)</div>
<div class="cube__face cube__face_back"></div>
<div class="cube__face cube__face_left"></div>
<div class="cube__face cube__face_right"></div>
<div class="cube__face cube__face_top"></div>
<div class="cube__face cube__face_bottom"></div>
</div>
</section>
</div>
h1 {
position: absolute;
left: 100px;
top: 100px;
font-size: 140px;
letter-spacing: 6px;
color: #fff;
user-select: none;
text-shadow: 0 0 5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .2), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .3);
}
.cube {
position: absolute;
left: 540px;
--size: 180px;
width: var(--size);
height: var(--size);
perspective: 600px;
}
.cube__body {
position: relative;
width: inherit;
height: inherit;
transform-style: preserve-3d;
transform: rotateY(15deg);
}
.cube__face {
position: absolute;
width: inherit;
height: inherit;
opacity: .5;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: lightcyan;
border: 2px solid #fff;
box-shadow: inset 0 0 15px rgba(0, 0, 0, .5);
}
.cube__face_front {
transform: rotateY(0) translate3d(0, 0, calc(var(--size) / 2));
}
.cube__face_back {
transform: rotateY(180deg) translate3d(0, 0, calc(var(--size) / 2));
}
.cube__face_left {
transform: rotateY(-90deg) translate3d(0, 0, calc(var(--size) / 2));
}
.cube__face_right {
transform: rotateY(90deg) translate3d(0, 0, calc(var(--size) / 2));
}
.cube__face_top {
transform: rotateX(90deg) translate3d(0, 0, calc(var(--size) / 2));
}
.cube__face_bottom {
transform: rotateX(-90deg) translate3d(0, 0, calc(var(--size) / 2));
}
Ноги свиньи сказали, что она не хочет вешать Вейю, так что пусть идет.Прослушивание показало, что грим был слишком густым, и этот постер провалился:
.love {
display: flex;
align-items: flex-end;
padding-bottom: 80px;
}
.cube__face {
box-shadow: inset 0 0 2px rgba(0, 0, 0, .5);
}
Переснимите плакат для продвижения:
Таким образом, ноги свиньи все еще выглядят красиво.
3. Дежурное спасение
Первоначально планировалось, что ноги свиньи будут перекатываться вперед два раза, чтобы войти в следующую сцену, но это не могло быть реализовано без руководства к действию (пожалуйста, запросите руководство к действию, чтобы помочь ногам свиньи), в настоящее время это единственный способ чтобы спасти сцену, нужно полагаться на дублера.
Передний валик свиных ножек:
.cube__body {
animation: woo 2s linear forwards;
}
@keyframes woo {
0% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(0);
}
5% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(0);
}
50% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(.25turn);
}
99% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(.25turn);
}
100% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(.25turn);
visibility: hidden;
}
}
Перевернитесь до того, как запасной игрок вступит во владение:
<section class="substitute">
<div class="substitute__body">
<div class="cube__face cube__face_front">替身</div>
<div class="cube__face cube__face_back"></div>
<div class="cube__face cube__face_left"></div>
<div class="cube__face cube__face_right"></div>
<div class="cube__face cube__face_top"></div>
<div class="cube__face cube__face_bottom"></div>
</div>
</section>
.substitute__body {
animation: woo_sub 2s 1.85s linear forwards;
visibility: hidden;
}
@keyframes woo_sub {
1% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(0);
visibility: hidden;
}
5% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(0);
visibility: hidden;
}
50% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(.25turn);
visibility: visible;
}
100% {
transform-origin: 100% 100%;
transform: rotateY(0) rotateZ(.25turn);
visibility: visible;
}
}
Подготовка к кадру, снова прослушивание:
Сцена недостаточно длинной, где поддержит поддержку актеров? Добавьте немного бюджета сейчас:
.director {
width: 1700px;
}
@keyframes len {
from {
transform: translateX(0);
}
to {
transform: translateX(-900px);
}
}
4. Второстепенные ролиsphereиграть
Поскольку общая управляемость режиссера слишком слаба, необходимо снимать разными кадрами:
.director {
/* animation: len 6s linear .2s forwards; */
transform: translateX(-900px);
}
.cube__body {
/* animation: woo 2s 1s linear forwards; */
}
.substitute__body {
/* animation: woo_sub 2s 2.85s linear forwards; */
}
Актеры второго плана ростом 1,6 метра выходят на сцену после нанесения грима:
<section class="sphere__wrap">
<div class="sphere sphere_left"></div>
<div class="sphere sphere_right"></div>
</section>
.sphere__wrap {
position: absolute;
bottom: 0;
right: -840px;
height: 320px;
width: 450px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.sphere {
--sphere-size: 160px;
width: var(--sphere-size);
height: var(--sphere-size);
border-radius:50%;
box-shadow:
0 3em 2.5em -2.5em rgba(53,64,73,.6),
0 0 1em -0.35em rgba(255,255,255,.2),
0 -1em 1.1em 0 rgba(255,255,255,.5) inset,
0 0 2.5em 0 rgba(227,249,250,.4) inset;
background:
radial-gradient(circle at 33% -25%,rgba(227,249,250,0) 40%,rgba(0, 0, 0,.07) 50%),
radial-gradient(circle at 50% 135%, rgba(0, 0, 0,.23) 43%,rgba(227,249,250,0)),
radial-gradient(circle at 50% -35%, rgba(227,249,250,.8) 45%,rgba(227,249,250,0)),
radial-gradient(circle at 50% 0, #fff,lightcyan);
background-size: 150%, 100%, 100%, 100%;
}
Эй, как актеру, нужно быть богатым действием, а не стоять вазой:
.sphere_left {
animation: move 1s ease-in forwards;
}
@keyframes move {
to {
transform: translateX(50px) rotate(.05turn);
}
}
Также нужно иметь богатые чувства.Думаете, достаточно быть немного пресным мясом невыразительным:
.love {
--color-love: #ed5a65;
}
.sphere_left::after {
content: "❤";
font-size: 42px;
color: var(--color-love);
position: absolute;
top: 0;
right: 0;
transform: scale(0);
animation: love_gen 1s .8s linear forwards;
}
@keyframes love_gen {
from {
transform: scale(0) translate(0, 0);
}
to {
transform: scale(1) translate(25px, -40px) rotate(-.05turn);
}
}
Хорошо, прослушивание:
Выглядит хорошо, следующий кадр.
5. Ноги свиньи показывают любовь
Сцены с актерами второго плана закончены, а сцены со свиными лапками, демонстрирующими любовь, все еще нужны.Настало время показать актерское мастерство разрыва свиных ножек, от демонстрации любви до разбитого сердца:
.substitute__body::after {
content: "❤";
font-size: 30px;
color: var(--color-love);
position: absolute;
top: 0;
right: 0;
transform: scale(0);
animation: love_vip 5s 4s linear forwards;
}
@keyframes love_vip {
0% {
transform: scale(0) translate(-100px, -200px);
}
10%, 80% {
transform: scale(1) translate(-125px, -110px) rotate(-.25turn);
}
100% {
content: "💔";
transform: scale(1) translate(-125px, -110px) rotate(-.25turn);
}
}
Прослушивание:
Dedicated Pig's Knuckle был недоволен эффектом и попросил переделать:
<span class="heart" data-text="❤">❤</span>
.heart {
font-size: 40px;
color: transparent;
position: absolute;
top: 0;
left: 0;
user-select: none;
transform: translate(50px, -50px) rotate(-.25turn) scale(0);
animation: love_vip 5s 4s linear forwards;
}
.heart::before,
.heart::after {
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
color: var(--color-love);
}
.heart::before {
clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
animation: love_broken_left 1s 8s linear forwards;
}
.heart::after {
clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
animation: love_broken_right 1s 8s linear forwards;
}
@keyframes love_vip {
0% {
transform: scale(0) translate(50px, -50px) rotate(-.25turn);
}
20%, 80% {
transform: scale(1) translate(10px, -125px) rotate(-.25turn);
}
100% {
transform: scale(1) translate(30px, -125px) rotate(-.25turn);
}
}
@keyframes love_broken_left {
to {
left: -.15em;
transform: rotate(-5deg);
top: -0.05em;
}
}
@keyframes love_broken_right {
to {
left: .15em;
transform: rotate(5deg);
top: 0.05em;
}
}
Прослушивание:
Что ж, эта сцена может быть закончена.
6. Любовь, сломанная свиной ногой
Режиссер: Вы должны полностью выразить эту любовную эмоцию: грусть, аутизм и, наконец, превращение в груду осколков...
Свиные лапки: кто я, где я...
Рассказчик: Так как преданные свиные ноги не могли выполнить требования режиссера, он решил уйти, чтобы сконцентрироваться на своих актерских способностях, и сказал, что не хочет этой награды, потому что его актерских способностей недостаточно...
7. Трейлер
Как отец свиных ножек, инвестор выразил уверенность в том, что свиные лапки определенно смогут проявить свои актерские способности, поэтому он предложил миллионам более поздних стадий пересмотреть фильм в качестве предварительной версии, чтобы привлечь популярность, и объявил, что официальная версия будет отложено (чтобы просмотреть предварительную версию, прокрутите вверх до предварительного просмотра эффекта), эта часть была слишком сильно изменена, пожалуйста, обратитесь к адресу исходного кода для получения подробной информации.
наконец
Дружеское напоминание: CSS — это интересно, но рекомендуется сосредоточиться на JavaScript.