旋转的饮料瓶文字特效

Categories:网页特效

by 网页特效库 |

on 2 12 月, 2024

一个美观且动态的瓶子，其中的文字会随着瓶子的旋转而变化。下面是创建一个带有旋转文本效果的瓶子的步骤介绍：

1. 创建瓶子容器

使用一个<div>作为瓶子的主容器，并为其添加类名bottle。
设置瓶子容器的宽度和高度，使其成为一个正方形。
添加透视效果，以便在三维空间中展示瓶子。

2. 创建瓶子侧面

在瓶子容器内创建另一个<div>，用于容纳所有的瓶子侧面，并添加类名bottle__sides。
为每个侧面创建一个<div>，并添加类名bottle__side。总共需要十个侧面，以覆盖瓶子的整个表面。
每个侧面包含一系列的元素，每个代表一个字符。

3. 样式化瓶子侧面

使用CSS Flexbox布局来排列每个侧面的字符。
通过transform属性将每个侧面定位到瓶子的不同角度。
使用backface-visibility属性隐藏背面的内容，避免不必要的显示问题。

4. 添加动画效果

定义一个关键帧动画spin，使瓶子围绕某个轴旋转。
将这个动画应用到bottle__sides容器上，使其持续不断地旋转。

通过以上步骤，你可以创建一个美观且动态的瓶子，其中的文字会随着瓶子的旋转而变化。这样的设计不仅有趣，还能提升用户体验。

<!DOCTYPE html>

<head>

<title>Bottle of Text</title>

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

}

.bottle__side span:nth-child(15) {

transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);

}

.bottle__side span:nth-child(16) {

transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);

}

.bottle__side span:nth-child(17) {

transform: translateZ(3.25ch) rotateY(15deg) scaleY(1.5);

}

@keyframes spin {

from {

transform: rotateZ(90deg) rotateX(-90deg);

}

to {

transform: rotateZ(90deg) rotateX(-54deg);

}

</style>

</head>

<body>

<div class="bottle__side">Drink more water!</div>

</div>

</body>

</html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bottle of Text</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <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); } .bottle__side span:nth-child(15) { transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75); } .bottle__side span:nth-child(16) { transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75); } .bottle__side span:nth-child(17) { transform: translateZ(3.25ch) rotateY(15deg) scaleY(1.5); } @keyframes spin { from { transform: rotateZ(90deg) rotateX(-90deg); } to { transform: rotateZ(90deg) rotateX(-54deg); } } </style> </head> <body> <div class="bottle"> <div class="bottle__sides"> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> <div class="bottle__side">Drink more water!</div> </div> </div> </body> </html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bottle of Text</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <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);
    }
    .bottle__side span:nth-child(15) {
      transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
    }
    .bottle__side span:nth-child(16) {
      transform: translateZ(3.5ch) rotateY(0deg) scaleY(1.75);
    }
    .bottle__side span:nth-child(17) {
      transform: translateZ(3.25ch) rotateY(15deg) scaleY(1.5);
    }
    
    @keyframes spin {
      from {
        transform: rotateZ(90deg) rotateX(-90deg);
      }
      to {
        transform: rotateZ(90deg) rotateX(-54deg);
      }
    }
  </style>

</head>
<body>
  <div class="bottle">
    <div class="bottle__sides">
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
      <div class="bottle__side"><span>D</span><span>r</span><span>i</span><span>n</span><span>k</span><span> </span><span>m</span><span>o</span><span>r</span><span>e</span><span> </span><span>w</span><span>a</span><span>t</span><span>e</span><span>r</span><span>!</span></div>
    </div>
  </div>
</body>
</html>

No Tag

旋转的饮料瓶文字特效

1. 创建瓶子容器

2. 创建瓶子侧面

3. 样式化瓶子侧面

4. 添加动画效果

No responses yet

发表回复取消回复

最新特效

最新评论

特效分类

旋转的饮料瓶文字特效

1. 创建瓶子容器

2. 创建瓶子侧面

3. 样式化瓶子侧面

4. 添加动画效果

No responses yet

发表回复 取消回复

最新特效

最新评论

特效分类

发表回复取消回复