3D文字

下载代码

html

css

分享到微信朋友圈

html

css

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Roboto Mono";
  font-size: 50px;
  padding: 50px 0 0 100px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  font-weight: 700;
  color: #fff;
  background-image: radial-gradient(#e85e3c, #7c1717);
  background-repeat: no-repeat;
  height: 100vh;
}

.t3xts {
  line-height: 1;
  position: relative;
  perspective: 1000px;
  text-transform: uppercase;
}

.t3xt {
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  text-transform: uppercase;
}

.t3xt-out {
  animation: text-out 0.5s ease;
}

.t3xt-in {
  animation: text-in 0.5s ease;
}

@keyframes text-out {
  to {
    transform: rotateX(90deg);
    opacity: 0;
  }
}
@keyframes text-in {
  from {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
.ref {
  background-color: #000;
  border-radius: 3px;
  padding: 5px 8px;
  position: absolute;
  font-size: 16px;
  bottom: 10px;
  right: 10px;
  color: #fff;
  font-weight: 300;
  font-family: sans-serif;
  text-decoration: none;
}
.ref::first-letter {
  font-size: 12px;
}

JavaScript

function n3xt(text, element) {
  var sample = document.querySelector(element);
  if (sample.dataset.animating === 'true') return;
  var sampleH = 50; // will keep it fixed, otherwise sample.offsetHeight
  var sampleT = sample.textContent; // old text
  var sampleNT = text; // new text
  sample.dataset.animating = 'true';
  sample.style.height = sampleH + 'px';

// original text element
  var samO = document.createElement('div');
  samO.style.transformOrigin = '0 ' + sampleH / 2 + 'px -' + sampleH / 2 + 'px';
  samO.classList.add('t3xt');
  samO.textContent = sampleT;

// new text element
  var samN = samO.cloneNode();
  samN.textContent = sampleNT;
  sample.textContent = '';
  sample.appendChild(samO);
  sample.appendChild(samN);

samO.classList.add('t3xt-out');
  samN.classList.add('t3xt-in');

samN.addEventListener('animationend', function (event) {
    sample.removeChild(samO);
    sample.removeChild(samN);
    sample.textContent = sampleNT;
    sample.dataset.animating = 'false';
  });
}

var phraseIndex = 1;
var wordIndex = 0;
var t3xts = [
["No!", "This is", "Patrick!"],
["I can't", "see my", "forehead"],
["Is mayonnaise", "an instrument"],
["F stands", "for Fun", "^_^"],
["I wumbo", "you wumbo", "he/she/me wumbo"],
["It may be", "stupid, but", "it's also dumb"],
["Moss always", "points to", "civilization"]];

// start it off
setTimeout(changetext, 200);

function changetext() {
  if (wordIndex > 2) {
    wordIndex = 0;
    phraseIndex++;
  }
  if (phraseIndex >= t3xts.length) {
    phraseIndex = 0;
  }
  var term = t3xts[phraseIndex][wordIndex];
  n3xt(term, '.t3xt-' + ++wordIndex);

if (wordIndex == 3) {
    setTimeout(changetext, 2000);
  } else {
    setTimeout(changetext, 150);
  }
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg