Причудливые 3D-анимации CSS | Насколько удивительно вы можете создавать анимации, используя только CSS?

внешний интерфейс CSS
Причудливые 3D-анимации CSS | Насколько удивительно вы можете создавать анимации, используя только CSS?

В этой статье подробно объясняется, как использовать характеристики CSS 3D для достижения различных интересных и крутых анимационных эффектов во многих аспектах. После внимательного прочтения вы получите:

  • Узнайте о различных вариантах использования CSS 3D
  • Вдохните свое новое вдохновение и почувствуйте красоту анимации
  • Будет полезно улучшить уровень производства CSS-анимации.

Основы CSS 3D

В этой статье предполагается, что читатели имеют определенные знания о CSS 3D и могут рисовать предварительные эффекты 3D-анимации. Конечно, здесь мы кратко пройдемся по основам CSS 3D.

Включить 3D-режим с помощью стиля трансформации

Чтобы использовать CSS3 для достижения 3D-эффектов, самое главное — использоватьtransform-styleАтрибуты.transform-styleЕсть только два значения на выбор:

// 语法：
transform-style: flat|preserve-3d;
 
transform-style: flat; // 默认，子元素将不保留其 3D 位置
transform-style: preserve-3d; // 子元素将保留其 3D 位置。

Когда мы указываем значение свойства стиля преобразования контейнера как save-3d, элементы-потомки контейнера будут иметь 3D-эффект, который является немного абстрактным, то есть после того, как текущий родительский контейнер установит сохранение-3d значение, его дочерние элементы Вы можете выполнять операции трехмерной деформации относительно плоскости, в которой расположен родительский элемент.

Используйте перспективу и источник перспективы, чтобы установить расстояние просмотра 3D для достижения эффектов перспективы/глубины резкости.

perspectiveЗадает расстояние 3D-перспективы для элемента, влияя только на потомков элемента, но не на сам элемент.

Проще говоря, когда элемент не установленperspectiveкогда, то есть когдаperspective:none/0Когда все элементы-потомки сжаты в одной двумерной плоскости, эффект глубины резкости отсутствует.

и если установленоperspectiveПосле этого вы увидите трехмерный эффект.

// 语法
perspective: number|none;

// 语法
perspective-origin: x-axis y-axis;
// x-axis : 定义该视图在 x 轴上的位置。默认值：50%
// y-axis : 定义该视图在 y 轴上的位置。默认值：50%

а такжеperspective-originУказывает положение базовой точки перспективы 3D-элемента.Центр перспективы перспективы по умолчанию находится в контейнере.perspectiveэлемент, на котором он расположен, а не середина его дочерних элементов, котораяperspective-origin: 50% 50%.

Ознакомьтесь с CSS 3D, нарисовав логотип Webpack

Студенты, которые плохо знакомы с CSS 3D, могут быстро ознакомиться с синтаксисом и понять правила, рисуя кубы.

Логотип Webpack состоит из 2-х кубов:

Для одного из кубов это на самом деле довольно легко реализовать:

  1. Куб состоит из 6 граней, поэтому сначала устанавливается div родительского элемента, затем этот div содержит 6 дочерних div, и в то же время устанавливается родительский элементtransform-style: preserve-3d;
  2. 6 дочерних элементов, сначала повернутых на разные углы по очереди, а затем пропущенных черезtranslateZСдвиньте расстояние на половину длины куба
  3. Доступ к родительскому элементу можно получить черезtransformа такжеperspectiveОтрегулируйте угол обзора

Взяв в качестве примера куб, простой псевдокод выглядит следующим образом:

<ul class="cube-inner">
  <li class="top"></li>
  <li class="bottom"></li>
  <li class="front"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="left"></li>
</ul>

.cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform-origin: 50px 50px;
    transform: rotateX(-33.5deg) rotateY(45deg);

    li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: rgba(141, 214, 249);
      border: 1px solid #fff;
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
    .left {
      transform: rotateY(-90deg) translateZ(50px);
    }
    .right {
      transform: rotateY(90deg) translateZ(50px);
    }
}

Сложив два, отрегулировав цвет и прозрачность, мы можем легко реализовать ЛОГОТИП Webpack:

Конечно, чтобы обеспечить визуальную согласованность каждой линии, ЛОГО здесь фактически не устанавливает эффект глубины резкости.perspective, мы можем попробовать добавить следующий код в родительский контейнер верхнего уровня,transformа такжеperspectiveОтрегулируйте угол обзора и установите эффект глубины резкости:

.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}

Можно получить настоящий 3D-эффект, а ощущения совсем другие:

Полный код, вы можете нажать здесь:CodePen Demo -- Webpack LOGO

Итак, разминка окончена, теперь давайте включим воображение и шагнем в мир CSS 3D.

Реализуйте 3D-эффект текста

Во-первых, взгляните на некоторые интересные текстовые эффекты CSS 3D.

Чтобы добиться 3D-эффекта текста, он выглядит трехмерным, и обычный способ — наложение нескольких слоев.

Вот несколько способов добиться трехмерного эффекта в тексте.

Предположим, у нас есть следующая структура:

<div class="g-container">
    <p>Lorem ipsum</p>
</div>

Если ничего не добавлять, отображение текста может выглядеть так:

Мы можем создать ощущение 3D, накладывая несколько слоев теней, в основном для разумного управления расстоянием и цветом теней.Основной код CSS выглядит следующим образом:

p {
    text-shadow: 
        4px 4px 0 rgba(0, 0, 0, .8),
        8px 8px 0 rgba(0, 0, 0, .6),
        12px 12px 0 rgba(0, 0, 0, .4),
        16px 16px 0 rgba(0, 0, 0, .2),
        20px 20px 0 rgba(0, 0, 0, .05);
}

Таким образом, возникает базовый визуальный эффект 3D.

Текстовый эффект 3D неоновых огней

Основываясь на этом, мы можем добиться некоторых эффектов 3D-текста, давайте посмотрим на текстовый эффект 3D-неонового света, ядро ​​​​это:

  • использоватьtext-shadowНаложение нескольких слоев текстовых теней
  • Используйте анимацию для динамического изменения цвета тени
<div class="container">
	<p class="a">CSS 3D</p>
	<p class="b">NEON</p>
	<p class="a">EFFECT</p>
</div>

Основной код CSS:

.container {
	transform: rotateX(25deg) rotateY(-25deg);
}
.a {
	color: #88e;
	text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,
		0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,
		0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
	animation: pulsea 300ms ease infinite alternate;
}
.b {
	color: #f99;
	text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
		0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
		0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
	animation: pulseb 300ms ease infinite alternate;
}
@keyframes pulsea {
	// ... 阴影颜色变化
}
@keyframes pulseb {
	// ... 阴影颜色变化
}

Можно получить следующие эффекты:

4

Полный код вы можете здесьВдохновение CSS — 3D неоновый эффект для текста с использованием теней

3D-эффект реального текста с помощью CSS 3D и translateZ

Конечно, первый метод, описанный выше, на самом деле не использует CSS 3D. Давайте сделаем еще один шаг, используя CSS 3D с translateZ.

Предположим, у вас есть следующая структура:

<div>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>  
</div>

Мы делаем это, давая родительскому элементуdivнастраиватьtransform-style: preserve-3d, для каждого<h1>установить разныеtranslateZ()Для достижения 3D-эффекта текста:

div {
    transform-style: preserve-3d;
}
h1:nth-child(2) {
    transform: translateZ(5px);
}
h1:nth-child(3) {
    transform: translateZ(10px);
}
h1:nth-child(4) {
    transform: translateZ(15px);
}
h1:nth-child(5) {
    transform: translateZ(20px);
}
h1:nth-child(6) {
    transform: translateZ(25px);
}
h1:nth-child(7) {
    transform: translateZ(30px);
}
h1:nth-child(8) {
    transform: translateZ(35px);
}
h1:nth-child(9) {
    transform: translateZ(40px);
}
h1:nth-child(10) {
    transform: translateZ(45px);
}

Конечно, с некоторыми изменениями поворота и цвета вы можете получить более чистые эффекты 3D-текста:

Полный код вы можете здесьВдохновение CSS — текстовый эффект трехмерного преобразования света и тени

Создавайте различные 3D-эффекты с расстоянием, углом, светом и тенью.

Так же есть очень интересная техника, производственный процесс требует большей отладки.

Разумное использование расстояния, угла, света и тени для создания различных 3D-эффектов. Взгляните на приведенный ниже пример, в котором просто задаются три слоя символов так, чтобы они были разделены определенным расстоянием по оси Z.

Простой псевдокод выглядит следующим образом:

<div>
  <span class='C'>C</span>
  <span class='S'>S</span>
  <span class='S'>S</span>
  <span></span>
  <span class='3'>3</span>
  <span class='D'>D</span>
</div>

$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
	perspective: 2000px;
	transform-style: preserve-3d;
	animation: fade $duration infinite;
}
span {
	transform-style: preserve-3d;
	transform: rotateY(25deg);
	animation: rotate $duration infinite ease-in;
	
	&:after, &:before {
		content: attr(class);
		color: $gold;
		z-index: -1;
		animation: shadow $duration infinite;
	}
	&:after{
		transform: translateZ(-16px);
	}
	&:before {
		transform: translateZ(-8px);
	}
}
@keyframes fade {
	// 透明度变化
}
@keyframes rotate {
	// 字体旋转
}
@keyframes shadow {
       // 字体颜色变化
}

Вкратце, ядро ​​приведенного выше кода:

  1. Родительский элемент, настройки дочернего элементаtransform-style: preserve-3d
  2. использоватьspanДва псевдоэлемента элемента копируют два одинаковых слова, используяtranslateZ()сделать их разнесенными на определенное расстояние по оси Z
  3. Добавить простое вращение, прозрачность, изменение цвета шрифта

У вас может получиться такая титровальная 3D анимация, похожая на заставку фильма.На самом деле здесь всего 3 слоя элементов, но за счет подходящего ракурса визуальная связь идеальна, и выглядит очень 3D.

3.gif

Почему нужно разумно использовать расстояние, угол, свет и тень?

Все тот же анимационный эффект, если начальный угол поворота анимации установить немного больше, весь эффект сотрется:

Как видите, на первых нескольких кадрах видна простая иерархическая структура. Или просто настроитьperspective, который устанавливает родительский контейнерperspectiveЗависит от2000pxизменить на500px, эффект ношения более очевиден:

4.gif

То есть, на правильном расстоянии и под правильным углом мы можем визуально сформировать относительно хороший 3D-эффект всего с несколькими элементами.

Полный код выше, вы можете ударить здесь:Вдохновение CSS — анимация внешнего вида 3D-текста

3D счетчик

Конечно, используя наше воображение, мы также можем использовать 3D-текстовые эффекты для создания множества интересных эффектов.

Например, это 3D-счетчик, который я использовал ранее в нашем проекте бизнес-визуализации Kanban:

4.gif

Код относительно длинный, поэтому я не буду его публиковать, но это тоже тот эффект, которого можно добиться с помощью чистого CSS.

Полный код вы можете здесьВдохновение CSS — трехмерная анимация подсчета чисел

космический эффект

Что ж, вышеприведенные главы в основном посвящены 3D-эффекту текста, давайте продолжим исследовать магию 3D в создании пространственных эффектов.

Превосходные 3D-эффекты могут дать людям ощущение погружения.Говорят, что CSS 3D на самом деле ограничен и может немного, но это не значит, что он не может добиться крутых и реалистичных эффектов.

Ключом к созданию реалистичного 3D-эффекта является использование правильных преимуществ.perspectiveАтрибуты.

С простым пониманием принципа мы также можем легко использовать CSS 3D для создания очень эстетичных эффектов пространства.

Здесь я покажу вам, как быстро нарисовать CSS 3D с пространственной эстетикой.

Разминка с помощью пространственных 3D-эффектов

Во-первых, мы используем Grid/Flex и другие макеты, чтобы заполнить экран сетками (элементами), просто нажмите по желанию:

<ul class="g-container">
  <li></li>
  <li></li>
  // ... 很多子 li
  <li></li>
</ul>

Исходный цвет фона — черный, а каждый элемент заполнен белым.

Затем измените форму каждого элемента, чтобы сделать его длинной полосой, которую можно изменить, изменив ширину элемента, заполнив часть градиентами и т. д.:

Далее настройки родительского контейнераtransform-style: preserve-3dа такжеperspective, настройки дочернего элементаtransform: rotateX(45deg), и происходит волшебство:

Ничего себе, всего за 3 шага мы изначально получили графику с ощущением пространства, давайте вернемся к настройкам цвета каждого подэлемента, заполним их разными цветами в случайном порядке и добавимtransform: translate3d()Рисуется анимация, простая работа CSS 3D:

5.gif

Основываясь на деформации и расширении этой техники, мы можем нарисовать множество подобных эффектов.

Вот еще раз рекомендуюCSS-DoodleЭтот инструмент может помочь нам быстро создавать сложные эффекты CSS.

CSS-doodle — это библиотека на основе веб-компонентов. Позволяет нам быстро создавать страницы на основе макета CSS Grid для достижения различных эффектов CSS (может называться искусством CSS).

Мы можем переключить вышеуказанные линии на дуги:

6.gif

Полный код можно найти здесь, используя CSS-Doodle в десятках строк:CodePen Demo - CSS-Doodle Random Circle

Другим примером является создание учителя Юань Чуань.Seeding:

7.gif

Используйте иллюстрированный материал

Конечно, основываясь на вышеизложенных методах, иногда кажется, что рисовать некоторые линии, дуги и квадраты с помощью CSS проблематично. В дальнейшем можно попробовать использовать существующие материалы для вторичного создания на основе CSS 3D.Вот очень интересный прием.

Предположим, у нас есть такой график:

Поместите эту картинку как запасную. Прежде чем использовать этот график, мы нарисуем такой график:

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
</div>

body {
  background: #000;
}
.g-container {
  position: relative;
}
.g-group {
  position: absolute;
  width: 100px;
  height: 100px;
  left: -50px;
  top: -50px;
  transform-style: preserve-3d;
}
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .5);
}
.item-right {
  background: red;
  transform: rotateY(90deg) translateZ(50px);
}
.item-left {
  background: green;
  transform: rotateY(-90deg) translateZ(50px);
}
.item-top {
  background: blue;
  transform: rotateX(90deg) translateZ(50px);
}
.item-bottom {
  background: deeppink;
  transform: rotateX(-90deg) translateZ(50px);
}
.item-middle {
  background: rgba(255, 255, 255, 0.5);
  transform: rotateX(180deg) translateZ(50px);
}

Всего установлено 5 дочерних элементов, но если внимательно посмотреть на код CSS, то установлено 4 из них.rotateX/Y(90deg/-90deg), то есть он повернут на 90° вокруг оси X или оси Y, которая визуально является плоскостью, перпендикулярной экрану, поэтому визуально мы ее не видим, видна только одна плоскость..item-middle.

Я установил разные цвета фона для 5 подэлементов, и результаты следующие:

Теперь это кажется ничем не примечательным, и это так.

Однако пришло время засвидетельствовать чудо, в это время мы отдаем родительский элемент.g-containerустановить минимальныйperspective, например, установкаperspective: 4px, и посмотрите на эффект:

.g-container {
  position: relative;
+ perspective: 4px;
}
// ...其余样式保持不变

В этот момент стиль рисования резко изменился, и весь эффект стал таким:

из-заperspectiveКогда это вступает в силу, исходный плоский эффект становится трехмерным. Затем мы используем карту звездного неба, подготовленную выше, заменяем цвет фона выше и заменяем их все одним и тем же изображением, и происходит волшебство:

8.png

из-за набораperspectiveочень ниже, и каждый пунктtransform: translateZ(50px)Настройка относительно большая, поэтому картинка визуально очень сильно вытянута. Но целое заполняет весь экран.

Далее нам просто нужно сдвинуть перспективу, добавить анимацию к родительскому элементу и управлять его перемещением.translateZ()Внесите изменения в:

.g-container{
  position: relative;
  perspective: 4px;
  perspective-origin: 50% 50%;
}

.g-group{
  position: absolute;
  // ... 一些定位高宽代码
  transform-style: preserve-3d;
  + animation: move 8s infinite linear;
}

@keyframes move {
  0%{
    transform: translateZ(-50px) rotate(0deg);
  }
  100%{
    transform: translateZ(50px) rotate(0deg);
  }
}

Смотрите, эффект волшебного и чудесного звездного неба выходит, Удивительно:

9.gif

Ложка дегтя в том, что анимацию нельзя подключать бесконечно, и в начале и в конце возникают большие проблемы.

Конечно, это нас не останавливает, мы можем:

  1. При наложении двух наборов одного и того же эффекта один из них более негативен, чем другой.animation-delayПереместиться вперед, чтобы два набора анимаций были связаны (один набор заканчивается, когда другой набор все еще движется)
  2. Потом через смену прозрачности скрыть егоitem-middleВнезапность встречного
  3. Наконец, вы можете передать фильтр родительского элементаhue-rotateУправление изменением цвета изображения

Мы пытаемся изменить структуру HTML следующим образом:

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
  <!-- 增加一组动画 -->
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>   
      <div class="item item-middle"></div>    
  </div>
</div>

Модифицированный базовый CSS выглядит следующим образом:

.g-container{
  perspective: 4px;
  position: relative;
  // hue-rotate 变化动画，可以让图片颜色一直变换
  animation: hueRotate 21s infinite linear;
}

.g-group{
  transform-style: preserve-3d;
  animation: move 12s infinite linear;
}
// 设置负的 animation-delay，让第二组动画提前进行
.g-group:nth-child(2){
  animation: move 12s infinite linear;
  animation-delay: -6s;
}
.item {
  background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
  background-size: cover;
  opacity: 1;
  // 子元素的透明度变化，减少动画衔接时候的突兀感
  animation: fade 12s infinite linear;
  animation-delay: 0;
}
.g-group:nth-child(2) .item {
  animation-delay: -6s;
}
@keyframes move {
  0%{
    transform: translateZ(-500px) rotate(0deg);
  }
  100%{
    transform: translateZ(500px) rotate(0deg);
  }
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  25%,
  60%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes hueRotate {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

Окончательный полный эффект выглядит следующим образом: эффект шаттла звездного неба, вся анимация связана от конца к концу, может продолжаться вечно, почти без недостатков, очень похвально:

10.gif

Полный код выше, вы можете ударить здесь:Вдохновение CSS — эффект путешествия во времени 3D-вселенной

Трехмерная анимация с бесконечно расширенной перспективой

Хорошо, после освоения вышеуказанных навыков мы можем легко продолжать деформировать и расходиться, чтобы получить множество бесконечно расширяющихся трехмерных перспективных анимаций.

Вот еще одна очень интересная анимация, в которой используется похожая техника:

11.gif

Принцип примерно такой же, как и у вышеупомянутого шаттла звездного неба.Фоновые изображения 4-х стен можно легко нарисовать с помощью CSS-градиентов.Далее нам просто нужно продумать, как сделать анимацию бесконечно зацикленной и управлять связью между начало и конец.

Впервые этот эффект был замечен вjkantnerCodePen, на котором я усовершенствовал и обогатил его, полный код, вы можете здесь:Вдохновение CSS — 3D-анимация с бесконечным расширением угла обзора

Эффект параллакса

Благодаря природе CSS 3D, он, естественно, очень подходит для создания некоторых эффектов параллакса.

Перед этой главой было некоторое обсуждение в другой статье.Эффект параллакса в CSS

Принцип таков:

  1. Мы устанавливаем контейнерtransform-style: preserve-3dа такжеperspective: [x]px, то дочерние элементы в этом контейнере будут находиться в 3D пространстве,

  2. Затем установите разные дочерние элементыtransform: translateZ()На этот раз разные элементы с экрана (к нашим глазам) расстояние 3D направление Z-оси не одинаково

  3. Прокрутите полосу прокрутки, потому что дочерние элементы установлены по-разномуtransform: translateZ(), затем они катятся вверх и вниз по расстояниюtranslateYОтносительный экран (наши глаза) тоже отличается, чем достигается эффект параллакса прокрутки.

Представление основного кода:

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>

html {
    height: 100%;
    overflow: hidden;
}

body {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.g-container {
    height: 150%;

    .section-one {
        transform: translateZ(-1px);
    }
    .section-two {
        transform: translateZ(-2px);
    }
    .section-three {
        transform: translateZ(-3px);
    }
}

Сводка — это настройки родительского элементаtransform-style: preserve-3dа такжеperspective: 1px, дочерние элементы набор разныхtransform: translateZПрокручивающаяся полоса прокрутки, эффект следующий:

12.gif

CodePen Demo -- CSS 3D parallax

Очевидно, что при прокрутке полосы прокрутки степень смещения различных подэлементов визуально отличается, и достигается так называемый эффект параллакса прокрутки.

Прокрутка тени текста параллакса / призрачный эффект / отображение нескольких изображений

Итак, используя эффект параллакса в translate3d, какие забавные эффекты вы можете получить? Интересен следующий эффект тени/призрака при прокрутке текста параллакса:

13.gif

CodePen Demo -- CSS translate3d Parallax

Во-вторых, мы можем применить эту технику к некоторым сценариям с большим экраном, таким как личная домашняя страница и отображение изображений.

Суть в том, чтобы установить разные изображения для каждого изображенияtranslateZ, установить родительский элементpersepectiveВот так, чтобы в процессе прокрутки вверх-вниз мог появиться простой эффект параллакса:

14.gif

CodePen Demo -- CSS Scroll Parallax Effect

Точно так же этот параллакс прокрутки можно использовать не только для прокрутки вверх и вниз, но и для прокрутки влево и вправо:

15.gif

CodePen Demo -- CSS-Only Horizontal Parallax Gallery By Paulina Hetman

Знакомство с другими практическими сценариями

В этой главе будут представлены некоторые интересные 3D-эффекты или анимации, которые можно реализовать.

404 Rolling Box

в моем собственномПерсональный сайт 404страница, эффект 404, созданный с помощью куба, реализованного в CSS 3D:

По своей сути он основан на 3D-кубе CSS:

  1. Добавить анимацию прокрутки куба
  2. Управляйте функцией смягчения падения и вибрационной анимацией приземления (чтобы сделать эффект более реалистичным, в анимации дизайна используются такие приемы, как подготовительные движения, анимация следования и перекрытия)
  3. Управляет панорамированием куба и наземного цифрового экрана.
  4. Управляйте бесконечным циклом анимации

Общее производство по-прежнему очень сложное, но использовать его на собственной странице 404 действительно здорово. Впервые я увидел этот эффект вYusuke NakayaБоже, вы можете нажать здесь для получения полного кода:CodePen -- Only CSS: 404 Rolling Box

индикатор выполнения куба

Ну а следующий все же использует куб. Давайте реализуем индикатор выполнения куба~

Во-первых, реализуйте куб со следующей структурой:

<div class="demo-cube perspective">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
    <li class="right"></li>
    <li class="left"></li>
  </ul>
</div>

Мы можем представить этот куб как контейнер трехмерного индикатора выполнения.Управляя цветом 6 сторон, мы можем умело получить эффект трехмерного индикатора выполнения.

Конечно, на самом деле нам не нужно столько граней, достаточно 4 граней, убрать левую и правую, а затем использовать градиент для изменения цвета каждой грани куба, убрать границу, основной код CSS следующим образом:

.demo-cube {
  position: relative;

  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 100px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-33.5deg);

    li {
      position: absolute;
      width: 300px;
      height: 100px;
      background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
  }
}

Мы можем получить очень классный 3D-эффект индикатора выполнения:

image

Анимируйте трехмерный индикатор выполнения с помощью свойств CSS

Конечно же, прогресс-бар, для него нужна анимация заливки. Поскольку мы используем индикатор прогресса, реализованный градиентом, нам нужно контролировать процентное изменение цвета в нем.

Обычно CSS не поддерживает градиентную анимацию, но нас это не беспокоит, потому что мы можем использовать CSS @Property.

Просто измените код:

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.demo-cube .cube {
  .top,
  .front,
  .bottom,
  .back {
    background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
    animation: perChange 6s infinite;
  }
}

@keyframes perChange {
  0% {
    --per: 0%;
  }
  90%,
  to {
    --per: 80%;
  }
}

Таким образом, мы реализовали движущийся трехмерный индикатор выполнения, просто нужно контролировать--perПользовательских свойств CSS достаточно, эффект следующий:

Если вы мало знаете о CSS @Property, вы можете прочитать эту статью автора —CSS @property делает невозможное возможным, его появление значительно улучшило возможности CSS по созданию различных анимаций.

Полный код выше, вы можете ударить здесь:Вдохновение CSS — индикатор выполнения 3D-куба

В заключение

Спасибо, что прочитали это. Если вы внимательно прочитаете вышеизложенное, я думаю, вы будете поражены магией CSS. Надеемся, что содержание этой статьи поможет вам:

  • Узнайте о различных вариантах использования CSS 3D
  • Вдохните свое новое вдохновение и почувствуйте красоту анимации
  • Улучшите свои CSS-анимации

Конечно, есть еще много нового и интересного CSS 3D-контента, и у меня еще есть много интересных DEMO, которые не были опубликованы.Конечно, для содержания этой статьи я думаю, что этого достаточно, и я будет продолжать делиться остальными в следующий раз.

Насколько потрясающую анимацию можно сделать, используя только CSS? Я думаю, что на этот вопрос нет ответа.С постоянным развитием языка CSS и постоянным добавлением различных новых функций, хотя он и не так хорош, как некоторые более профессиональные языки в некоторых аспектах, он также имеет свои преимущества. с точки зрения удобства и простоты обучения.

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

На меня могут обратить внимание более захватывающие CSS-эффектыCSS-вдохновение

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории