css3文字环绕旋转

目录

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

固定数量文字环绕旋转

<!-- 文字旋转测试 -->
<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<spanv-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.mzph.cn/news/139221.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

desc相关注入

desc相关注入 补充

HBuilderX vue项目打包上传到服务器

完成后有个’dist’目录,把真个目录通过FTP 上传到服务器,Mac电脑使用cyberduck 上传 服务器使用‘宝塔’进行一件部署,基本上就是傻瓜式的点击下一步

某电力设计公司薪酬激励优化项目成功案例纪实

——优化薪酬结构&#xff0c;增加对优秀人才的激励倾向&#xff0c;提高员工工作积极性 【客户行业】电力行业 【问题类型】薪酬激励 【客户背景及现状分析】 某电力设计公司成立于2000年左右&#xff0c;是一家从事输变电工程勘察、设计、咨询的专业公司&#xff0c;至今成…

建行广东江门分行:科技赋能,数据助力纠“四风”

为进一步深化落实中央八项规定精神&#xff0c;持续加大“四风”问题查处力度&#xff0c;建行驻江门市分行纪检组根据《广东省分行贯彻落实中央八项规定精神持之以恒纠治“四风”实施方案》&#xff08;建粤党发〔2023〕1号&#xff09;安排&#xff0c;对驻在市分行开展“四风…

Vue项目中强制刷新页面的方法

我们在动态切换组件的过程中&#xff0c;导航栏和底栏不动&#xff0c;动态切换中间区域的情况&#xff0c;在首页可以进行跳转任意组件&#xff0c;在组件与组件之间不能相互跳转&#xff0c;路由发生了变化&#xff0c;但是页面未改变&#xff0c;这时我们就需要强制刷新页面…

如何用sklearn对随机森林调参

文章目录 一、概述二、实操1、导入相关包2、导入乳腺癌数据集&#xff0c;建立模型3、调参 三、总结 Link&#xff1a;https://zhuanlan.zhihu.com/p/126288078 Author&#xff1a;陈罐头 一、概述 sklearn是目前python中十分流行的用来实现机器学习的第三方包&#xff0c;其中…

凯美瑞 vs 太空船:Web3 游戏生长的两条路径

撰文&#xff1a;Teng Yan&#xff08;0xPrismatic&#xff09;&#xff0c;Delphi Digital 研究员 编译&#xff1a;TinTinLand 来源&#xff1a;https://0xprismatic.substack.com/p/my-short-web3-gaming-thesis 经常有人问我关于 Web3 游戏的看法&#xff0c;所以我想以这…

什么是数据库事务、事务的ACID、怎么设置/禁止自动提交?

数据库事务及ACID 数据库事务是指作为单个逻辑工作单元执行的一组操作。这组操作要么全部成功地执行&#xff0c;要么全部不执行&#xff0c;不允许出现部分执行的情况。数据库事务通常需要满足ACID属性&#xff0c;即原子性&#xff08;Atomicity&#xff09;、一致性&#x…

某城高速综合管控大数据大屏可视化【可视化项目案例-04】

🎉🎊🎉 你的技术旅程将在这里启航! 🚀🚀 本文选自专栏:可视化技术专栏100例 可视化技术专栏100例,包括但不限于大屏可视化、图表可视化等等。订阅专栏用户在文章底部可下载对应案例源码以供大家深入的学习研究。 🎓 每一个案例都会提供完整代码和详细的讲解,不…

大厂真题:【哈希表】美团2023秋招-小美的排列询问

题目描述与示例 题目描述 小美拿到了一个排列。她想知道在这个排列中&#xff0c;x和y是否是相邻的。你能帮帮她吗&#xff1f; 排列是指一个长度为n的数组&#xff0c;其中 1 到 n 每个元素恰好出现一次。 输入描述 第一行输入一个正整数n&#xff0c;代表排列的长度。 …

【复杂网络建模】——基于关联矩阵构建超图网络

目录 一、复杂网络介绍 二、常规的构建方法 三、基于关联矩阵构建超图 一、复杂网络介绍 复杂网络是指由大量相互连接的元素或节点构成的网络,这些节点之间的连接关系通常是非常复杂和多样化的。这种网络结构通常用图论来表示,其中节点表示网络中的个体或元素,边表示它们…

Python开源项目PGDiff——人脸重建(Face Restoration),模糊清晰、划痕修复及黑白上色的实践

python ansconda 等的下载、安装等请参阅&#xff1a; Python开源项目CodeFormer——人脸重建&#xff08;Face Restoration&#xff09;&#xff0c;模糊清晰、划痕修复及黑白上色的实践https://blog.csdn.net/beijinghorn/article/details/134334021 友情提示&#xff1a; …

CSS3 过度效果、动画、多列

一、CSS3过度&#xff1a; CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点&#xff0c;必须规定两相内容&#xff1a;指定要添加效果的CSS属性&#xff1b;指定效果的持续时间。如果为指定持续时间&#xff0c;transition将没有任何效果。 <style> div…

Ubuntu(WSL2) 安装最新版的 cmake

Ubuntu(WSL) 安装最新版的 cmake 具体流程如下&#xff1a; 步骤一&#xff1a;卸载原本的 cmake sudo apt-get remove cmake 步骤二&#xff1a; sudo apt-get update sudo apt-get install apt-transport-https ca-certificates gnupg software-properties-common wget 步…

nsd的资料

nsd是一款开源的DNS服务器应用。 近期参与项目过程中&#xff0c;涉及到DNS业务&#xff0c;结果被打的满头包。 虽然在校学习时就知道DNS协议&#xff0c;但从业这么多年&#xff0c;对于DNS协议的理解其实一直处于一知半解的状态。 当前处理问题时&#xff0c;接触到了nsd&am…

Clickhouse 学习笔记(6)—— ClickHouse 分片集群

前置知识&#xff1a; Clickhouse学习笔记&#xff08;5&#xff09;—— ClickHouse 副本-CSDN博客 与副本对比&#xff1a; 副本虽然能够提高数据的可用性&#xff0c;降低丢失风险&#xff0c;但是每台服务器实际上必须容纳全量数据&#xff0c;对数据的横向扩容没有解决 …

Redis学习笔记8:基于springboot的Lettuce redis客户端connectTimeout、timeout、shutdownTimeout

一个对springboot redis框架进行重写&#xff0c;支持lettuce、jedis、连接池、同时连接多个集群、多个redis数据库、开发自定义属性配置的开源SDK <dependency><groupId>io.github.mingyang66</groupId><artifactId>emily-spring-boot-redis</art…

基于工业智能网关的汽车充电桩安全监测方案

近年来&#xff0c;我国新能源汽车产业得到快速发展&#xff0c;电动车产量和销量都在持续增长&#xff0c;不仅国内市场竞争激烈&#xff0c;而且也远销海外&#xff0c;成为新的经济增长点。但与此同时&#xff0c;充电设施的运营却面临着安全和效率的双重挑战。 当前的充电桩…

Linux开发工具之编辑器vim

文章目录 1.vim是啥?1.1问问度娘1.2自己总结 2.vim的初步了解2.1进入和退出2.2vim的模式1.介绍2.使用 3.vim的配置3.1自己配置3.2下载插件3.3安装大佬配置好的文件 4.程序的翻译 1.vim是啥? 1.1问问度娘 1.2自己总结 vi/vim都是多模式编辑器&#xff0c;vim是vi的升级版本&a…

【Excel】补全单元格值变成固定长度

我们知道股票代码都为6位数字&#xff0c;但深圳中小板代码前面以0开头&#xff0c;数字格式时前面的0会自动省略&#xff0c;现在需要在Excel表格补全它。如下图&#xff1a; 这时我们需要用到特殊的函数&#xff1a;TEXT或者RIGHT TEXT函数是Excel中一个非常有用的函数。TEX…