这里来讲解 3D云标签-酷炫的动画-工作原理与实现代码（令我想起了高中时候极不想看见的的sin,cos,tanS等高中数学）

最新推荐文章于 2021-06-26 18:08:01 发布
最新推荐文章于 2021-06-26 18:08:01 发布
阅读量370 收藏 3
点赞数
分类专栏： web前端 3D动画 js 文章标签： web前端 动画 3D动画 js js进阶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qaakd/article/details/102778634
版权
js 同时被 3 个专栏收录
83 篇文章 0 订阅
订阅专栏
web前端
53 篇文章 0 订阅
订阅专栏
3D动画
1 篇文章 0 订阅
订阅专栏

注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script>

效果图：

工作原理（长话短说）：

1.先写一个div和自定义一些文字，颜色可以随机或者自定义几个，进行随机

2.利用js写一个自定义圆的大少活动范围，即利用好，高中数学里面的pai r 。圆的面积等于pai*r*r(pai同音词)

3.最后是动画，就是这些文字或者其他元素，想在自定义范围内展示一个什么样的动画效果。其实不一定要和他一致，发挥自己的创新是最好的。（这里的动画，是根据数学公式sin，cos等的运动轨迹动画来的。当鼠标在某个标签的4个方向内时，他会根据距离，方向，调用一个反方向的sin，cos之类的运动动画效果。值得学习的是，距离的远近会直接影响动画的速度，讲解完毕谢谢内心看完，欢迎交流互相学习）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D云标签</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#navg {
    width:1240px;
    margin:auto;
}
.tagBall {
    width:500px;
    height:500px;
    position:absolute;
    top:20px;
    left:20px;
}
.tag {
    display:block;
    position:absolute;
    left:0px;
    top:0px;
    color:#000;
    text-decoration:none;
    font-size:15px;
    font-family:"微软雅黑";
    font-weight:bold;
}
.tag:hover {
    border:1px solid #666;
}
.form_vav td {
    color:#a78b6f;
}
</style>
</head>
<body>
<div class="dadiv">
    <div class="tagBall">
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">冯佳兴</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">佳人才子</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲 </a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
        <a class="tag" href="###">温娉哲</a>
    </div>
</div>

<script>
var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),
    paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];
RADIUS = 220,
    fallLength = 500,
    tags = [],
    angleX = Math.PI / 500,
    angleY = Math.PI / 500,
    CX = paper.offsetWidth / 2,
    CY = paper.offsetHeight / 2,
    EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft,
    EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;

function getClass(className) {
    var ele = document.getElementsByTagName("*");
    var classEle = [];
    for (var i = 0; i < ele.length; i++) {
        var cn = ele[i].className;
        if (cn === className) {
            classEle.push(ele[i]);
        }
    }
    return classEle;
}

function innit() {
    for (var i = 0; i < tagEle.length; i++) {
        var a, b;
        var k = -1 + (2 * (i + 1) - 1) / tagEle.length;
        var a = Math.acos(k);
        var b = a * Math.sqrt(tagEle.length * Math.PI);
        var x = RADIUS * Math.sin(a) * Math.cos(b);
        var y = RADIUS * Math.sin(a) * Math.sin(b);
        var z = RADIUS * Math.cos(a);
        var t = new tag(tagEle[i], x, y, z);
        tagEle[i].style.color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
        tags.push(t);
        t.move();
    }
}
Array.prototype.forEach = function(callback) {
    for (var i = 0; i < this.length; i++) {
        callback.call(this[i]);
    }
}

function animate() {
    setInterval(function() {
        rotateX();
        rotateY();
        tags.forEach(function() {
            this.move();
        })
    }, 17)
}
if ("addEventListener" in window) {
    paper.addEventListener("mousemove", function(event) {
        var x = event.clientX - EX - CX;
        var y = event.clientY - EY - CY;
        angleY = x * 0.0001;
        angleX = y * 0.0001;
    });
} else {
    paper.attachEvent("onmousemove", function(event) {
        var x = event.clientX - EX - CX;
        var y = event.clientY - EY - CY;
        angleY = x * 0.0001;
        angleX = y * 0.0001;
    });
}

function rotateX() {
    var cos = Math.cos(angleX);
    var sin = Math.sin(angleX);
    tags.forEach(function() {
        var y1 = this.y * cos - this.z * sin;
        var z1 = this.z * cos + this.y * sin;
        this.y = y1;
        this.z = z1;
    })

}

function rotateY() {
    var cos = Math.cos(angleY);
    var sin = Math.sin(angleY);
    tags.forEach(function() {
        var x1 = this.x * cos - this.z * sin;
        var z1 = this.z * cos + this.x * sin;
        this.x = x1;
        this.z = z1;
    })
}
var tag = function(ele, x, y, z) {
    this.ele = ele;
    this.x = x;
    this.y = y;
    this.z = z;
}
tag.prototype = {
    move: function() {
        var scale = fallLength / (fallLength - this.z);
        var alpha = (this.z + RADIUS) / (2 * RADIUS);
        this.ele.style.fontSize = 15 * scale + "px";
        this.ele.style.opacity = alpha + 0.5;
        this.ele.style.filter = "alpha(opacity = " + (alpha + 0.5) * 100 + ")";
        this.ele.style.zIndex = parseInt(scale * 100);
        this.ele.style.left = this.x + CX - this.ele.offsetWidth / 2 + "px";
        this.ele.style.top = this.y + CY - this.ele.offsetHeight / 2 + "px";
    }
}
innit();
animate();
</script>

</body>
</html>

js代码可直接运行，复制即可

欢迎交流，欢迎提供更高效的代码

qaakd
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5 canvas 3D文字云动画
06-27
HTML5 canvas 3D文字云动画基于Modernizr2.6.2制作，3D球形旋转动画，文字云动画。
标签球状云特效(3D+Html+Js)
12-14
本文用三种方法实现关键字特效,第一个是流动效果,每二个是静态效果,第三个是3D云特效 1.因本文中关键字来自sql数据库的表字段,使用前需配置数据连接参数. 2.多个关键字通过逗号分隔,在读取到的关键字,需根据逗号重新分割后再显示,3D效果还需下载一个js文件, js地址:http://www.jimmy2k.top/js/lable_3D.js 3.演示效果地址 : http://www.jimmy2k.top/test/3D_clound.asp 4. 原文来自: http://www.jimmy2k.top/
两个标签云动画效果小demo
nqmysb的博客
04-25 1352
两个动态标签云效果 demo1 demo2 效果预览地址 https://liaocan.top/dynamic-tags-cloud/demo1/ https://liaocan.top/dynamic-tags-cloud/demo2/ 项目传送门 https://github.com/nqmysb/dynamic-tags-cloud ...
高中数学flash课件集（141个)(上）
06-27
高中数学flash课件集（141个)(上)，不错的资源
android动画sin cos,高中数学知识点：sin和cos运用到三角形上(动画版)
weixin_31212247的博客
05-25 604
在高中数学知识点中函数占据着一定的比列，是高考必考的数学知识点之一。其中正弦和余弦更是高中数学函数中的重点，sin和cos经常和三角形结合到一起。下面就让我们一起来梳理一下sin和cos在三角形中的应用：1.正弦函数sin正弦函数的定理：在一个三角形中，各边和它所对角的正弦的比相等，即 a/sin A=b/sin B=c/sin C正弦函数的定理在三角形求面积中的运用-S△=c2sinAsinB/...
Android代码-酷炫的 Fragment 切换动画，我承认是有些浮夸。
08-06
Depth Add some Depth to your fragments The blue comes from the activity background color In your activity final Depth depth = DepthProvider.getDepth(container);...public View onCreateView...
Flutter 实现酷炫的3D效果示例代码
08-18
Flutter 实现酷炫的3D效果示例代码 本文主要介绍了 Flutter 实现酷炫的 3D 效果，通过实例代码给大家介绍了非常详细，对大家的学习或工作具有一定的参考借鉴价值。以下是对标题、描述、标签和部分内容的详细解释： ...
CSS3实现酷炫动画按钮特效.zip
07-11
本篇将详细讲解如何使用CSS3来实现酷炫的动画按钮特效，以及如何通过JavaScript进行响应式调整。 首先，CSS3中的关键帧动画（@keyframes）是实现按钮特效的基础。关键帧动画允许我们定义一个动画的过程，从起始状态...
html5酷炫3D love文字动画特效.zip
07-11
实现效果： html5酷炫3D love文字动画特效，这样的效果还是很酷炫的，用来告白应该还不错哦，这样的特效在网站里面还是用的少，不过可以收藏哦，php中文网推荐下载！
CSS3实现酷炫动画按钮特效特效代码
03-20
本主题聚焦于利用CSS3实现的酷炫动画按钮特效，这种特效能够在用户点击按钮时呈现出动态变化，进一步提升用户体验。 首先，我们要理解CSS3中的关键帧动画（Keyframe Animation）。通过@keyframes规则，我们可以定义...
html5 canvas文字标签云3D旋转动画特效.zip
07-11
实现效果： html5 canvas文字标签云3D旋转动画特效,在企业网站中加号是哪个这个的效果，我觉得也还是很不错的一个特效吧，php中文网推荐大家下载！
jquery+html5模拟3D云彩飘动效果
06-12
HTML5在线模拟天空云彩飘动效果，请在如下版本浏览器下观看 Chrome 10, Firefox 4 or Safari 6
html3d云标签,3D标签云
weixin_39562998的博客
06-26 389
开始之前文章开始之前，应该了解几个重要的公式。回忆一下我们逝去的高中。重要概念：sinθ、cosθ的值得大小区间是[-1,1];弧度跟角度的转换公式是：弧度 = π/180 * 角度。公式：1、在空间直角坐标系中，以坐标原点为球心，半径为R的球面的参数方程为:x = r * sinθ * cosΦ;y = r * sinθ * sinΦ;z = r * cosθ;说明：θ为点跟圆心的连线与z轴的夹...
jquery html5模拟3d云彩飘动效果,基于Jquery和html5实现炫酷的3D焦点图动画
weixin_28856717的博客
06-04 285
这款HTML5焦点图不仅可以手动点击按钮切换图片，而且还支持自动切换图片，使用起来也相当方便。如果你需要在网站中展示产品图片，那么这款焦点图插件非常适合你。在线演示源码下载HTML代码 http://www.colazionedamichy.it/ http://www.percivalclo.com/ http://www.wanda.net/fr http://lifeingreenville...
[jQuery]3D效果的标签云
weixin_34277853的博客
10-05 284
刚才看了篇园友关于如何自定义标签云的文章，心痒痒自己也想弄一个，其实原理非常简单，就是动态load标签页里的标签，按需要的格式重新动态生成DOM结构，再通过第三方的js插件(他们用的是Google Visualization API Gallery中的TermCloud)将特定的DOM转换成标签云的效果就OK了！所以最有技术含量的地方还在第三方的js插件...
jquery 3D 标签云
weixin_34129145的博客
06-13 132
http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html 相关选项     zoom: 90 初始的缩放度     min_zoom: 25     max_zoom: 120     zoom_factor: 2 - 鼠标滚轮的缩放速度     rotate_factor: -0.45 - 鼠标移...
基于HTML5 SVG可互动的3D标签云jQuery插件
千寻啊千寻
04-26 4822
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式，可使用鼠标与标签进行互动，并提供很多参数来控制标签云的外观。 效果演示：http://qianxunclub.com添加代码使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。<script src="js/jquery.
小程序3D标签云
qq_40644829的博客
11-28 2796
微信小程序实现3D标签云 在网上查找了许多3d标签云的案列，一般都是用原生和jquery写的，然后参考 https://www.cnblogs.com/axes/p/3501424.html这篇文章 在小程序里面实现标签云，具体代码如下 wxml // An highlighted block &lt;view class="tagBall"&gt; &lt;a class="tag" wx:...
js实现拖动div元素（js实现元素拖动）
热门推荐
Web前端工程师
10-17 1万+
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script> 效果图： <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS拖拽div<...
"Android实现酷炫3D星体旋转动画效果
在Android中，想要实现酷炫的3D动画效果，一般有两种选择：Open GL ES和Camera。Open GL ES虽然能够实现高级的3D特效或游戏，但使用起来过于复杂，而且并不开源，因此在实现简单的3D效果时，使用Camera就已经足够了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qaakd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值