css实现文字杯子瓶子转动效果代码-html代码-BFW代码库

css实现文字杯子瓶子转动效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字杯子瓶子转动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&amp;display=swap'>

    <style>
        * {
      border: 0;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    :root {
      font-size: calc(24px + (36 - 24)*(100vw - 320px)/(1280 - 320));
    }
    
    body {
      background: #0b46da;
      color: #ffffff;
      display: flex;
      font: bold 1em/1.5 "DM Mono", monospace;
      height: 100vh;
      text-transform: uppercase;
    }
    
    .bottle {
      margin: auto;
      perspective: 25em;
      position: relative;
      width: 11em;
      height: 11em;
    }
    .bottle__sides, .bottle__side {
      position: absolute;
      top: 50%;
      left: 0;
      transform-style: preserve-3d;
    }
    .bottle__sides {
      animation: spin 1s linear infinite;
      top: 0;
      width: 100%;
      height: 100%;
      transform: rotateZ(90deg) rotateX(-90deg);
    }
    .bottle__side {
      display: flex;
    }
    .bottle__side:nth-child(1) {
      transform: translateY(-50%) rotateX(0deg);
    }
    .bottle__side:nth-child(2) {
      transform: translateY(-50%) rotateX(36deg);
    }
    .bottle__side:nth-child(3) {
      transform: translateY(-50%) rotateX(72deg);
    }
    .bottle__side:nth-child(4) {
      transform: translateY(-50%) rotateX(108deg);
    }
    .bottle__side:nth-child(5) {
      transform: translateY(-50%) rotateX(144deg);
    }
    .bottle__side:nth-child(6) {
      transform: translateY(-50%) rotateX(180deg);
    }
    .bottle__side:nth-child(7) {
      transform: translateY(-50%) rotateX(216deg);
    }
    .bottle__side:nth-child(8) {
      transform: translateY(-50%) rotateX(252deg);
    }
    .bottle__side:nth-child(9) {
      transform: translateY(-50%) rotateX(288deg);
    }
    .bottle__side:nth-child(10) {
      transform: translateY(-50%) rotateX(324deg);
    }
    .bottle__side span {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: inline-block;
      width: 1ch;
    }
    .bottle__side span:nth-child(1) {
      transform: translateZ(2ch) rotateY(0deg) scaleY(1);
    }
    .bottle__side span:nth-child(2) {
      transform: translateZ(2ch) rotateY(0deg) scaleY(1);
    }
    .bottle__side span:nth-child(3) {
      transform: translateZ(2.25ch) rotateY(-30deg) scaleY(1);
    }
    .bottle__side span:nth-child(4) {
      transform: translateZ(2.75ch) rotateY(-30deg) scaleY(1.3);
    }
    .bottle__side span:nth-child(5) {
      transform: translateZ(3.25ch) rotateY(-30deg) scaleY(1.5);
    }
    .bottle__side span:nth-child(6) {
      transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
    }
    .bottle__side span:nth-child(7) {
      transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
    }
    .bottle__side span:nth-child(8) {
      transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
    }
    .bottle__side span:nth-child(9) {
      transform: translateZ(3.3ch) rotateY(15deg) scaleY(1.5);
    }
    .bottle__side span:nth-child(10) {
      transform: translateZ(3ch) rotateY(15deg) scaleY(1.4);
    }
    .bottle__side span:nth-child(11) {
      transform: translateZ(2.8ch) rotateY(0deg) scaleY(1.3);
    }
    .bottle__side span:nth-child(12) {
      transform: translateZ(2.8ch) rotateY(0deg) scaleY(1.3);
    }
    .bottle__side span:nth-child(13) {
      transform: translateZ(3ch) rotateY(-15deg) scaleY(1.4);
    }
    .bottle__side span:nth-child(14) {
      transform: translateZ(3.3ch) rotateY(-15deg) scaleY(1.5);
    }
.........完整代码请登录后点击上方下载按钮下载查看