做心悦腾龙光环的网站是什么,南通外贸网站建设,长沙做网站的故事,php网站制作目录 固定数量文字环绕旋转不固定数量文字环绕旋转效果图 固定数量文字环绕旋转
!-- 文字旋转测试 --
templatediv classpagedivdiv v-for(item, index) in [...Array(20).keys()] :keyindex style!-- 文字旋转测试 --
templatediv classpagedivdiv v-for(item, index) in [...Array(20).keys()] :keyindex stylecolor: red^_^红红火火恍恍惚惚/div/divdiv classfatherspan classtext盒子1/spanspan classtext盒子2/spanspan classtext盒子3/spanspan classtext盒子4/spanspan classtext盒子5/spanspan classtext盒子6/span!-- span classtexti盒子1/i/spanspan classtexti盒子2/i/spanspan classtexti盒子3/i/spanspan classtexti盒子4/i/spanspan classtexti盒子5/i/spanspan classtexti盒子6/i/span --!-- span classtextb盒子1/bstrong盒子1/strongspan/spani测试1/i/spanspan classtextb盒子2/bstrong盒子2/strongspan/spani测试2/i/spanspan classtextb盒子3/bstrong盒子3/strongspan/spani测试3/i/spanspan classtextb盒子4/bstrong盒子4/strongspan/spani测试4/i/spanspan classtextb盒子5/bstrong盒子5/strongspan/spani测试5/i/spanspan classtextb盒子6/bstrong盒子6/strongspan/spani测试6/i/span --/div/div
/templatescript
export default {name: TextRotate,components: {},data() {return {}},computed: {},watch: {},created() {},mounted() {},methods: {}
}
/scriptstyle langscss 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
不固定数量文字环绕旋转
!-- 文字旋转测试 --
templatediv classpagedivdiv v-for(item, index) in [...Array(20).keys()] :keyindex stylecolor: red^_^红红火火恍恍惚惚/div/divdiv classfather我是fatherspanv-for(item, index) in [...Array(count).keys()]:keyindexclasstext:styletransform: translateX(-50%) rotateY(${(360 / count) * index}deg) translateZ(300px)盒子{{ item 1 }}/span!-- span classtext盒子2/spanspan classtext盒子3/spanspan classtext盒子4/spanspan classtext盒子5/spanspan classtext盒子6/span --!-- span classtexti盒子1/i/spanspan classtexti盒子2/i/spanspan classtexti盒子3/i/spanspan classtexti盒子4/i/spanspan classtexti盒子5/i/spanspan classtexti盒子6/i/span --!-- span classtextb盒子1/bstrong盒子1/strongspan/spani测试1/i/spanspan classtextb盒子2/bstrong盒子2/strongspan/spani测试2/i/spanspan classtextb盒子3/bstrong盒子3/strongspan/spani测试3/i/spanspan classtextb盒子4/bstrong盒子4/strongspan/spani测试4/i/spanspan classtextb盒子5/bstrong盒子5/strongspan/spani测试5/i/spanspan classtextb盒子6/bstrong盒子6/strongspan/spani测试6/i/span --/div/div
/templatescript
export default {name: TextRotate,components: {},data() {return {count: 10 // 文字条数}},computed: {},watch: {},created() {},mounted() {},methods: {}
}
/scriptstyle langscss 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
效果图
