vue三维文字环绕标签动画效果代码
代码语言:html
所属分类:其他
代码描述:vue三维文字环绕标签动画效果代码,鼠标悬浮可排列成竖形状态。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style id="webmakerstyle"> body { width: 100vw; height: 100vh; text-align: center; } #root { width: 100%; height: 100%; display: flex; } .ball-bg { margin: auto; width: 300px; height: 300px; } .ball-bg .container { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; perspective: 1000; animation: fullrotate 10s linear infinite; } .ball-bg .container .point { position: absolute; top: 50%; left: 49%; transition: transform 2s; font-size: 12px; } .ball-bg .container.plan { animation: unset; } .ball-bg .container.plan .point { transition: transform .6s; font-size: 16px; cursor: pointer; } .ball-bg .container.plan .point:hover { border-bottom: 1px solid #808080; } .ball-bg .container.columnar { animation: full-columnar 10s linear infinite; } @keyframes fullrotate { to { transform: rotateY(360deg) rotateZ(360deg); } } @keyframes full-columnar { to { transform: rotateY(360deg); } } </style> </head> <body> <div id="root"> <div class="ball-bg"> <div :class="`container ${shape}`" ref="coin" @mouseenter="shape = 'plan';" @mouseleave="mouseLeave"> <div class="point" v-for="(item, idx) in tags" :key="idx" :style="item.style">{{ item.text }}</div> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script> 'use strict'; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } var app = new Vue({ el: '#root', data: { shapes: ['plan', 'ball', 'columnar'], shape: 'columnar', oldShape: 'columnar', tags: [], width: 200 }, watch: { shape: function shape(val, old) { this.oldShape = old; this.deformation(val); } }, methods: { deformation: function deformation(type) { var _this = this; var len = this.tags.length; var func = null; var random = function random() { var min = arguments[0] || 0; var max = arguments[1] || 0; if (max < min) { var _ref = [max, min]; min = _ref[0]; max = _ref[1]; } return Math.random() *.........完整代码请登录后点击上方下载按钮下载查看
网友评论0