css3文字环绕旋转

news2024/10/7 12:26:08

目录

  • 固定数量文字环绕旋转
  • 不固定数量文字环绕旋转
  • 效果图

固定数量文字环绕旋转

<!-- 文字旋转测试 -->
<template>
  <div class="page">
    <div>
      <div v-for="(item, index) in [...Array(20).keys()]" :key="index" style="color: red">
        ^_^红红火火恍恍惚惚
      </div>
    </div>
    <div class="father">
      <span class="text">盒子1</span>
      <span class="text">盒子2</span>
      <span class="text">盒子3</span>
      <span class="text">盒子4</span>
      <span class="text">盒子5</span>
      <span class="text">盒子6</span>

      <!-- <span class="text"><i>盒子1</i></span>
      <span class="text"><i>盒子2</i></span>
      <span class="text"><i>盒子3</i></span>
      <span class="text"><i>盒子4</i></span>
      <span class="text"><i>盒子5</i></span>
      <span class="text"><i>盒子6</i></span> -->

      <!-- <span class="text"><b>盒子1</b><strong>盒子1</strong><span></span><i>测试1</i></span>
      <span class="text"><b>盒子2</b><strong>盒子2</strong><span></span><i>测试2</i></span>
      <span class="text"><b>盒子3</b><strong>盒子3</strong><span></span><i>测试3</i></span>
      <span class="text"><b>盒子4</b><strong>盒子4</strong><span></span><i>测试4</i></span>
      <span class="text"><b>盒子5</b><strong>盒子5</strong><span></span><i>测试5</i></span>
      <span class="text"><b>盒子6</b><strong>盒子6</strong><span></span><i>测试6</i></span> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextRotate',
  components: {},

  data() {
    return {
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {}
}
</script>

<style lang='scss' scoped>
.page {
  perspective: 700px;
  .father {
    width: 50%;
    margin: 50px auto;
    background-color: tomato;

    // 动画
    position: relative;
    transform-style: preserve-3d;
    // 添加动画
    animation: rotate 10s linear infinite;

    &:hover {
      // 鼠标悬浮动画停止
      animation-play-state: paused;
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }

    .text {
      background-color: green;

      // 动画
      position: absolute;
      top: 0;
      left: 50%;

      // b {
      //   color: transparent;
      // }

      // strong {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   z-index: 1;
      //   color: red;
      // }
      // span {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   background-color: pink;
      // }

      // i {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   transform: rotateY(180deg);
      //   z-index: -1;
      //   color: green;
      // }

      &:nth-of-type(1) {
        // 【问题】为什么是Z轴移动？
        // 【解答】盒子Y轴旋转60deg后。他的z轴也跟着转了
        // transform: rotateY(0deg) translateZ(300px);
        transform: translateX(-50%) rotateY(0deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: red;
      }

      &:nth-of-type(2) {
        // 先旋转 再移动
        // transform: rotateY(60deg) translateZ(300px);
        transform: translateX(-50%) rotateY(60deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: orange;
      }

      &:nth-of-type(3) {
        // 先旋转 再移动
        // transform: rotateY(120deg) translateZ(300px);
        transform: translateX(-50%) rotateY(120deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: yellow;
      }

      &:nth-of-type(4) {
        // 先旋转 再移动
        // transform: rotateY(180deg) translateZ(300px);
        transform: translateX(-50%) rotateY(180deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: green;
      }

      &:nth-of-type(5) {
        // 先旋转 再移动
        // transform: rotateY(240deg) translateZ(300px);
        transform: translateX(-50%) rotateY(240deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: blue;
      }

      &:nth-of-type(6) {
        // 先旋转 再移动
        // transform: rotateY(300deg) translateZ(300px);
        transform: translateX(-50%) rotateY(300deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: purple;
      }
    }
  }
}
</style>

不固定数量文字环绕旋转

<!-- 文字旋转测试 -->
<template>
  <div class="page">
    <div>
      <div v-for="(item, index) in [...Array(20).keys()]" :key="index" style="color: red">
        ^_^红红火火恍恍惚惚
      </div>
    </div>
    <div class="father">
      我是father
      <span
        v-for="(item, index) in [...Array(count).keys()]"
        :key="index"
        class="text"
        :style="`transform: translateX(-50%) rotateY(${
          (360 / count) * index
        }deg) translateZ(300px)`"
      >
        盒子{{ item + 1 }}
      </span>
      <!-- <span class="text">盒子2</span>
      <span class="text">盒子3</span>
      <span class="text">盒子4</span>
      <span class="text">盒子5</span>
      <span class="text">盒子6</span> -->

      <!-- <span class="text"><i>盒子1</i></span>
      <span class="text"><i>盒子2</i></span>
      <span class="text"><i>盒子3</i></span>
      <span class="text"><i>盒子4</i></span>
      <span class="text"><i>盒子5</i></span>
      <span class="text"><i>盒子6</i></span> -->

      <!-- <span class="text"><b>盒子1</b><strong>盒子1</strong><span></span><i>测试1</i></span>
      <span class="text"><b>盒子2</b><strong>盒子2</strong><span></span><i>测试2</i></span>
      <span class="text"><b>盒子3</b><strong>盒子3</strong><span></span><i>测试3</i></span>
      <span class="text"><b>盒子4</b><strong>盒子4</strong><span></span><i>测试4</i></span>
      <span class="text"><b>盒子5</b><strong>盒子5</strong><span></span><i>测试5</i></span>
      <span class="text"><b>盒子6</b><strong>盒子6</strong><span></span><i>测试6</i></span> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextRotate',
  components: {},

  data() {
    return {
      count: 10 // 文字条数
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {}
}
</script>

<style lang='scss' scoped>
.page {
  perspective: 700px;
  .father {
    // display: inline-block; // .father 内没有内容/内容过少（即宽度小）的话：由于 .text 的宽度和 .father 宽度一样，会导致 .text 中文字换行
    width: 50%;
    margin: 50px auto;
    background-color: tomato;

    // 动画
    position: relative;
    transform-style: preserve-3d;
    // 添加动画
    animation: rotate 10s linear infinite;

    &:hover {
      // 鼠标悬浮动画停止
      animation-play-state: paused;
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }

    .text {
      background-color: green;

      // 动画
      position: absolute;
      top: 0;
      left: 50%;

      // b {
      //   color: transparent;
      // }

      // strong {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   z-index: 1;
      //   color: red;
      // }
      // span {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   background-color: pink;
      // }

      // i {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   transform: rotateY(180deg);
      //   z-index: -1;
      //   color: green;
      // }

      &:nth-of-type(1) {
        // 【问题】为什么是Z轴移动？
        // 【解答】盒子Y轴旋转60deg后。他的z轴也跟着转了
        // transform: rotateY(0deg) translateZ(300px);
        transform: translateX(-50%) rotateY(0deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: red;
      }

      &:nth-of-type(2) {
        // 先旋转 再移动
        // transform: rotateY(60deg) translateZ(300px);
        transform: translateX(-50%) rotateY(60deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: orange;
      }

      &:nth-of-type(3) {
        // 先旋转 再移动
        // transform: rotateY(120deg) translateZ(300px);
        transform: translateX(-50%) rotateY(120deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: yellow;
      }

      &:nth-of-type(4) {
        // 先旋转 再移动
        // transform: rotateY(180deg) translateZ(300px);
        transform: translateX(-50%) rotateY(180deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: green;
      }

      &:nth-of-type(5) {
        // 先旋转 再移动
        // transform: rotateY(240deg) translateZ(300px);
        transform: translateX(-50%) rotateY(240deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: blue;
      }

      &:nth-of-type(6) {
        // 先旋转 再移动
        // transform: rotateY(300deg) translateZ(300px);
        transform: translateX(-50%) rotateY(300deg) translateZ(300px); // X水平居中 Y轴旋转 Z轴平移形成圆
        background-color: purple;
      }
    }
  }
}
</style>

效果图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1193025.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

pytorch优化器详解

pytorch优化器详解

1 什么是优化器 1.1 优化器介绍 在PyTorch中&#xff0c;优化器&#xff08;Optimizer&#xff09;是用于更新神经网络参数的工具。它根据计算得到的损失函数的梯度来调整模型的参数&#xff0c;以最小化损失函数并改善模型的性能。 即优化器是一种特定的机器学习算法&#…
阅读更多...
2014年计网408

2014年计网408

第一题 在 OSI 参考模型中, 直接为会话层提供服务的是()A. 应用层B. 表示层C. 传输层D. 网络层 运输层是会话层的相邻下层&#xff0c;它为会话层直接提供服务。运输层也称为传输层。 第二题 某以太网拓扑及交换机当前转发表如下图所示, 主机 00-e1-d5-00-23-a1 向主机 00−…
阅读更多...
Postman小白安装和注册入门教程

Postman小白安装和注册入门教程

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 一&#xff09;安装 访问官网https://www.getpostman.com/downloads/&#xff0c;直接下载安装。 二&#xff09;注册和登录…
阅读更多...
金蝶云星空表单插件实现父窗体打开子窗体，并携带参数到子窗体

金蝶云星空表单插件实现父窗体打开子窗体，并携带参数到子窗体

文章目录 金蝶云星空表单插件实现父窗体打开子窗体&#xff0c;并携带参数到子窗体父窗体打开子窗体准备设置携带参数打开子窗体子窗体接收参数 金蝶云星空表单插件实现父窗体打开子窗体&#xff0c;并携带参数到子窗体 父窗体打开子窗体准备 BillShowParameter OtherInAdd n…
阅读更多...
使用PE U盘在VM Workstation中安装系统

使用PE U盘在VM Workstation中安装系统

VM Workstation中虚拟机的启动项如下图&#xff0c;发现不能支持U盘启动&#xff0c;需要使用PE盘在虚拟机中安装系统怎么办呢&#xff01; 喜欢使用ISO镜像安装系统的小伙伴可以放弃这种方法了。但是这种方法可以测试你的PE盘是否正常工作&#xff0c;模拟在物理服务器上的安…
阅读更多...
十进制转换成2进制

十进制转换成2进制

十进制转换成2进制 参考链接&#xff1a;https://blog.csdn.net/qq_44755403/article/details/89279970?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169960944816800227457337%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id…
阅读更多...
Zabbix深入解析与实战

Zabbix深入解析与实战

1.Zabbix 1.1.监控概述 监控是指对行为、活动或其他变动中信息的一种持续性关注&#xff0c;通常是为了对人达成影响、管理、指导或保护的目的 监控 监视主机架构状态控制&#xff0c;事后追责目标&#xff1a;早发现早处理(故障、性能、架构) 网站扩容(用数据说话) 为什么要…
阅读更多...
OC-编译错误

OC-编译错误

明明包含了头文件&#xff0c;但是还是显示未知的类型 可能这个头文件被某个宏包住了 #if defined(__cplusplus) 在 C 代码中包含了一个 C 的头文件会显示这个错误“the util lib only be used in c”&#xff0c;此时用 #if defined(__cplusplus) #endif 包一下就行了&…
阅读更多...
行情分析——加密货币市场大盘走势（11.10）

行情分析——加密货币市场大盘走势（11.10）

大饼今日继续上涨&#xff0c;正如预期&#xff0c;跌不下来&#xff0c;思路就是逢低做多。现在已经上涨到36500附近&#xff0c;目前从MACD日线来看&#xff0c;后续还要继续上涨&#xff0c;当然稳健的可以不做。昨日的策略已经达到止盈&#xff0c;也是顺利的落袋为安啦。一…
阅读更多...
TCC分布式事务----以Hmily框架为例

TCC分布式事务----以Hmily框架为例

插曲&#xff1a;RocketMQ的Half Message 先引入一个插曲&#xff0c;RocketMQ为什么要有Half Message 为什么不在本地事务提交之后&#xff0c;直接发一个commit消息不就行了&#xff0c;为什么还要先发一个可以撤回的、不能被消费的half message&#xff0c;再执行本地事务…
阅读更多...
FindMy网络帮助您找到电动车

FindMy网络帮助您找到电动车

随着科技的发展&#xff0c;我们的生活变得越来越智能化。而现在&#xff0c;这项技术已经深入到了我们的出行方式中。如果你是一位电动车主&#xff0c;那么你可能会遇到一个常见的问题&#xff1a;忘记你的电动车停在了哪里。这种情况在日常生活中时有发生&#xff0c;而现在…
阅读更多...
磁盘的分区、格式化、检验与挂载 ---- fdisk，mkfs，mount

磁盘的分区、格式化、检验与挂载 ---- fdisk，mkfs，mount

磁盘的分区、格式化、检验与挂载 磁盘管理是非常重要的&#xff0c;当我们想要再系统里面新增一块磁盘使用时&#xff0c;应执行如下几步&#xff1a; 对磁盘进行划分&#xff0c;以建立可用的硬盘分区 &#xff08;fdisk / gdisk&#xff09;对硬盘分区进行格式化&#xff0…
阅读更多...
【微信公众号开发】1.1 微信公众号开发课程内容介绍

【微信公众号开发】1.1 微信公众号开发课程内容介绍

一、微信公众号介绍 1、公众号类型及基本介绍 服务号、订阅号、小程序之间的关联及区别 2、编辑模式的使用 非开发者使用微信公众号的方式&#xff0c;通过微信公众号提供的平台来编辑 3、开发模式及预备知识介绍 如果我们不想使用默认的编辑模式&#xff0c;可以在具备一…
阅读更多...
首周 Web3 开发者激励开启！数据与钱包新锐派送福利

首周 Web3 开发者激励开启！数据与钱包新锐派送福利

如何在 Web3 时代汇聚更多开发者的力量&#xff0c;寻找全新的技术发展机遇和突破点&#xff1f;打造生态繁荣、高度协作的社区生态是不二路径。现在&#xff0c;一系列更为开放、活跃、包容的开发者社区活动正向大家发起邀请&#xff0c;你确定不来看看吗&#xff1f; 为了吸…
阅读更多...
Power Automate-创建审批流

Power Automate-创建审批流

提前在SharePoint上创建好对应的表 在创建中选择自动化云端流 选择当创建项时触发 选择站点和列表&#xff0c;再点击添加新步骤 搜索审批&#xff0c;点击进入 操作里的选项区别&#xff1a; 1&#xff09;创建审批&#xff1a;创建一个审批任务 2&#xff09;等待审批&…
阅读更多...
【Linux】 mdir命令使用

【Linux】 mdir命令使用

mdir 为mtools工具指令&#xff0c;模拟MS-DOS的dir指令&#xff0c;可显示MS-DOS文件系统中的目录内容。 语法 mdir [参数][目录] mdir命令 -Linux手册页 命令选项及作用 执行令 mdir--help 执行命令结果 参数 -a 　显示隐藏文件。-f 　不显示磁盘所剩余的可用空间。-w…
阅读更多...
踹他GPT 之 弄个大乐透助手

踹他GPT 之 弄个大乐透助手

11月7日凌晨的OpenAI第一次开发者大会&#xff0c;除了速度提升、服务使用费用的减少、开发者生态以外&#xff0c;最让我震撼的是&#xff0c;GPTS是ChatGPT的定制版本&#xff0c;是通过简单配置就可以完成一个使用ChatGPT、集成系统和数据服务的智能助手。比如OpenAI开发者体…
阅读更多...
用Go实现网络流量解析和行为检测引擎

用Go实现网络流量解析和行为检测引擎

1.前言 最近有个在学校读书的迷弟问我:大德德, 有没有这么一款软件, 能够批量读取多个抓包文件,并把我想要的数据呈现出来, 比如:源IP、目的IP、源mac地址、目的mac地址等等。我说&#xff1a;“这样的软件你要认真找真能找出不少开源软件, 但毕竟没有你自己的灵魂在里面,要不…
阅读更多...
【Python】queue模块Queue对象

【Python】queue模块Queue对象

Python中的queue模块是一个同步队列类&#xff0c;实现了多生产者、多消费者队列&#xff0c;适用于在多线程之间安全地传递消息或其他数据。Queue提供了所有必需的锁定语义。 queue模块有三种类型的队列&#xff08;只是队列中元素的提取顺序不同&#xff09;&#xff1a;先进…
阅读更多...
小型洗衣机好用吗？最好用的迷你洗衣机

小型洗衣机好用吗？最好用的迷你洗衣机

很多人会觉得小型洗衣机是智商税&#xff0c;没有必要专门买一个小型洗衣机来洗内衣&#xff0c;洗个内衣只需要两分钟的事情&#xff0c;需要花个几百块钱去入手一个洗衣机吗&#xff1f;然而清洗贴身衣物的并不是一件简单的事情&#xff0c;如果只是简单的搓洗&#xff0c;内…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023