Эффект 3D челнока? Легко с помощью CSS

внешний интерфейс JavaScript CSS
Эффект 3D челнока? Легко с помощью CSS

задний план

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

я использовалУскоритель онлайн-игр Tencent, Однако, когда вы нажимаете кнопку перезарядки, выдается сообщение о том, что клиент был недавно обновлен, и перезарядка в настоящее время не поддерживается (эта операция меня шокировала~). Просто развернитесь, чтобы скачатьАкселератор NetEase UU.

Откройте домашнюю страницу UU Accelerator, и вы увидите эту картинку:

11.gif

В одно мгновение меня привлекло его фоновое изображение.

Из чувствительности к CSS я вслепую догадался, что это реализовано с помощью CSS, по крайней мере, это должен быть Canvas. Откройте консоль, немного разочарован, это.mp4документ:

посмотри сноваNetworkпанель, это.mp4Файлу действительно нужно 3,5М?

Эмм, я больше не хочу играть в игры.Разве CSS не может обработать такое фоновое изображение??

Эффект межзвездного 3D-шаттла с использованием CSS 3D

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

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

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

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

из-за набора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);
  }
}

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

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

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

  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);
  }
}

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

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

Таким образом, мы в основном восстанавливаем то, что видели выше.Акселератор NetEase UUАнимированный фон для главной страницы.

Идя дальше, я не хочу использовать одно изображение

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

Конечно, CSS YYDS. Здесь мы пытаемся использоватьbox-shadow, чтобы заменить актуальную звездную карту, также вdivРеализовано внутри тега с помощью функции цикла SASS:

<div></div>

@function randomNum($max, $min: 0, $u: 1) {
	@return ($min + random($max)) * $u;
}

@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

@function shadowSet($maxWidth, $maxHeight, $count) {
    $shadow : 0 0 0 0 randomColor();
    
    @for $i from 0 through $count {         
        $x: #{random(10000) / 10000 * $maxWidth};
        $y: #{random(10000) / 10000 * $maxHeight};

        
        $shadow: $shadow, #{$x} #{$y} 0 #{random(5)}px randomColor();
    }
    
    @return $shadow;
}

body {
    background: #000;
}

div {
    width: 1px;
    height: 1px;
    border-radius: 50%;
    box-shadow: shadowSet(100vw, 100vh, 500);
}

Здесь мы оборачиваем функцию в SASS, которая использует несколькоbox-shadowФункция генерации входящего количества точек в пределах высоты и ширины входящего размера.

Таким образом, мы можем получить такую ​​картинку, которая используется для замены фактической карты неба:

Давайте заменим приведенное выше изображение настоящей картой звездного неба, в основном для замены.itemЭтот класс, перечислите только измененную часть:

// 原 CSS，使用了一张星空图
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
  background-size: cover;
  animation: fade 12s infinite linear;
}

// 修改后的 CSS 代码
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  animation: fade 12s infinite linear;
}
.item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: shadowSet(100vw, 100vh, 500);
}

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

CodePen Demo -- Pure CSS Galaxy Shuttle 2

Регулируя время анимации,perspectiveзначение каждой группы элементовtranslateZ()Изменяя расстояние, вы можете получить множество различных видов и эффектов.Заинтересованные читатели могут попробовать это на основе ДЕМО, которое я дал выше.

наконец

Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)

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

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

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

Категории