Canvas 3D球形文字云动画特效

本帖最后由 前端小姐姐 于 2021-12-31 10:58 编辑

1、效果展示：

1.gif (577.68 KB, 下载次数: )

下载附件

2021-12-31 10:47 上传

包括2效果：文字四周进入效果+球形文字运动效果

2、代码展示：
①html：
<div class="b_10_3">
    <canvas width="300" height="300" id="myCanvas"></canvas>
    <div id="tags" class="active">
        <a href="#">北京</a>
        <a href="#">武汉</a>
        <a href="#">上海</a>
        <a href="#">杭州</a>
        <a href="#">深圳</a>
        <a href="#">南京</a>
        <a href="#">洛阳</a>
        <a href="#">长沙</a>
        <a href="#">昆明</a>
        <a href="#">吉林</a>
        <a href="#">青岛</a>
        <a href="#">济南</a>
        <a href="#">郑州</a>
        <a href="#">绵阳</a>
        <a href="#">珠海</a>
        <a href="#">九江</a>
        <a href="#">扬州</a>
        <a href="#">盐城</a>
        <a href="#">成都</a>
        <a href="#">荆门</a>
        <a href="#">岳阳</a>
        <a href="#">中山</a>
        <a href="#">宜宾</a>
        <a href="#">宿迁</a>
        <a href="#">重庆</a>
        <a href="#">绍兴</a>
    </div>
</div>
②css：.b_10_3 {
    width: 300px;
    height: 300px;
    overflow: hidden;
    text-align:center;
    background:#999;
    position: relative;
    margin: 0 auto;
}
#myCanvas{
    display: none;
    margin: 0 auto;
}
#tags{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#tags.active{
    display: block !important;
}
#tags a{
    position: absolute;
    color: #cd3400;
    text-decoration: none;
    opacity: 0;
    transition: all ease 0.9s;
}
/* 控制文字四周进入效果 */
#tags a:nth-child(1){
    left: 103px;
    top: 31px;
    opacity: .75;
    transform: scale(.85);
    -webkit-animation: a1 2s ease-in-out forwards;
    -o-animation: a1 2s ease-in-out forwards;
    animation: a1 2s ease-in-out forwards;
}
@keyframes a1 {
    from{
        opacity: 0;
        transform: translate3d(275px, -218px, 0px) rotate(2deg);
    }
    to{
        opacity: .75;
        transform: scale(.85) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(2){
    left: 178px;
    top: 22px;
    opacity: .75;
    transform: scale(1);
    -webkit-animation: a2 2s ease-in-out forwards;
    -o-animation: a2 2s ease-in-out forwards;
    animation: a2 2s ease-in-out forwards;
}
@keyframes a2 {
    from{
        opacity: 0;
        transform: translate3d(189px, -52px, 0px) rotate(16deg);
    }
    to{
        opacity: .75;
        transform: scale(1) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(3){
    left: 131px;
    top: 72px;
    opacity: .25;
    transform: scale(.7);
    -webkit-animation: a3 2s ease-in-out forwards;
    -o-animation: a3 2s ease-in-out forwards;
    animation: a3 2s ease-in-out forwards;
}
@keyframes a3 {
    from{
        opacity: 0;
        transform: translate3d(15px, -190px, 0px) rotate(-2deg);
    }
    to{
        opacity: .25;
        transform: scale(.7) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(4){
    left: 72px;
    top: 34px;
    opacity: .85;
    transform: scale(1.15);
    -webkit-animation: a4 2s ease-in-out forwards;
    -o-animation: a4 2s ease-in-out forwards;
    animation: a4 2s ease-in-out forwards;
}
@keyframes a4 {
    from{
        opacity: 0;
        transform: translate3d(-119px, 10px, 0px) rotate(-1deg);
    }
    to{
        opacity: .85;
        transform: scale(1.15) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(5){
    left: 213px;
    top: 69px;
    opacity: .65;
    transform: scale(.85);
    -webkit-animation: a5 2s ease-in-out forwards;
    -o-animation: a5 2s ease-in-out forwards;
    animation: a5 2s ease-in-out forwards;
}
@keyframes a5 {
    from{
        opacity: 0;
        transform: translate3d(313px, -2px, 0px) rotate(-20deg);
    }
    to{
        opacity: .65;
        transform: scale(.85) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(6){
    left: 73px;
    top: 88px;
    opacity: .32;
    transform: scale(.75);
    -webkit-animation: a6 2s ease-in-out forwards;
    -o-animation: a6 2s ease-in-out forwards;
    animation: a6 2s ease-in-out forwards;
}
@keyframes a6 {
    from{
        opacity: 0;
        transform: translate3d(-201px, 117px, 0px) rotate(-26deg);
    }
    to{
        opacity: .32;
        transform: scale(.75) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(7){
    left: 167px;
    top: 56px;
    opacity: 1;
    transform: scale(1.15);
    -webkit-animation: a7 2s ease-in-out forwards;
    -o-animation: a7 2s ease-in-out forwards;
    animation: a7 2s ease-in-out forwards;
}
@keyframes a7 {
    from{
        opacity: 0;
        transform: translate3d(269px, -85px, 0px) rotate(-14deg);
    }
    to{
        opacity: 1;
        transform: scale(1.15) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(8){
    left: 167px;
    top: 107px;
    opacity: .26;
    transform: scale(.65);
    -webkit-animation: a8 2s ease-in-out forwards;
    -o-animation: a8 2s ease-in-out forwards;
    animation: a8 2s ease-in-out forwards;
}
@keyframes a8 {
    from{
        opacity: 0;
        transform: translate3d(-18px, 69px, 0px) rotate(25deg);
    }
    to{
        opacity: .26;
        transform: scale(.65) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(9){
    left: 18px;
    top: 94px;
    opacity: .7;
    transform: scale(.95);
    -webkit-animation: a9 2s ease-in-out forwards;
    -o-animation: a9 2s ease-in-out forwards;
    animation: a9 2s ease-in-out forwards;
}
@keyframes a9 {
    from{
        opacity: 0;
        transform: translate3d(90px, -7px, 0px) rotate(-22deg);
    }
    to{
        opacity: .7;
        transform: scale(.95) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(10){
    left: 253px;
    top: 102px;
    opacity: .7;
    transform: scale(1);
    -webkit-animation: a10 2s ease-in-out forwards;
    -o-animation: a10 2s ease-in-out forwards;
    animation: a10 2s ease-in-out forwards;
}
@keyframes a10 {
    from{
        opacity: 0;
        transform: translate3d(-81px, 227px, 0px) rotate(7deg);
    }
    to{
        opacity: .7;
        transform: scale(1) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(11){
    left: 107px;
    top: 125px;
    opacity: .2;
    transform: scale(.65);
    -webkit-animation: a11 2s ease-in-out forwards;
    -o-animation: a11 2s ease-in-out forwards;
    animation: a11 2s ease-in-out forwards;
}
@keyframes a11 {
    from{
        opacity: 0;
        transform: translate3d(152px, -69px, 0px) rotate(-12deg);
    }
    to{
        opacity: .2;
        transform: scale(.65) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(12) {
    left: 78px;
    top: 119px;
    opacity: 1;
    transform: scale(1.15);
    -webkit-animation: a12 2s ease-in-out forwards;
    -o-animation: a12 2s ease-in-out forwards;
    animation: a12 2s ease-in-out forwards;
}
@keyframes a12 {
    from{
        opacity: 0;
        transform: translate3d(-20px, 189px, 0px) rotate(-1deg);
    }
    to{
        opacity: 1;
        transform: scale(1.15) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(13) {
    left: 213px;
    top: 136px;
    opacity: .25;
    transform: scale(.7);
    -webkit-animation: a13 2s ease-in-out forwards;
    -o-animation: a13 2s ease-in-out forwards;
    animation: a13 2s ease-in-out forwards;
}
@keyframes a13 {
    from{
        opacity: 0;
        transform: translate3d(311px, -187px, 0px) rotate(-17deg);
    }
    to{
        opacity: .25;
        transform: scale(.7) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(14) {
    left: 37px;
    top: 144px;
    opacity: .32;
    transform: scale(.75);
    -webkit-animation: a14 2s ease-in-out forwards;
    -o-animation: a14 2s ease-in-out forwards;
    animation: a14 2s ease-in-out forwards;
}
@keyframes a14 {
    from{
        opacity: 0;
        transform: translate3d(-38px, 57px, 0px) rotate(26deg);
    }
    to{
        opacity: .32;
        transform: scale(.75) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(15) {
    left: 223px;
    top: 157px;
    opacity: .95;
    transform: scale(1.1);
    -webkit-animation: a15 2s ease-in-out forwards;
    -o-animation: a15 2s ease-in-out forwards;
    animation: a15 2s ease-in-out forwards;
}
@keyframes a15 {
    from{
        opacity: 0;
        transform: translate3d(322px, -223px, 0px) rotate(8deg);
    }
    to{
        opacity: .95;
        transform: scale(1.1) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(16) {
    left: 144px;
    top: 151px;
    opacity: .16;
    transform: scale(.65);
    -webkit-animation: a16 2s ease-in-out forwards;
    -o-animation: a16 2s ease-in-out forwards;
    animation: a16 2s ease-in-out forwards;
}
@keyframes a16 {
    from{
        opacity: 0;
        transform: translate3d(-138px, 107px, 0px) rotate(30deg);
    }
    to{
        opacity: .16;
        transform: scale(.65) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(17) {
    left: 22px;
    top: 178px;
    opacity: .95;
    transform: scale(1.1);
    -webkit-animation: a17 2s ease-in-out forwards;
    -o-animation: a17 2s ease-in-out forwards;
    animation: a17 2s ease-in-out forwards;
}
@keyframes a17 {
    from{
        opacity: 0;
        transform: translate3d(51px, -15px, 0px) rotate(-4deg);
    }
    to{
        opacity: .95;
        transform: scale(1.1) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(18) {
    left: 242px;
    top: 179px;
    opacity: .7;
    transform: scale(.85);
    -webkit-animation: a18 2s ease-in-out forwards;
    -o-animation: a18 2s ease-in-out forwards;
    animation: a18 2s ease-in-out forwards;
}
@keyframes a18 {
    from{
        opacity: 0;
        transform: translate3d(-225px, 167px, 0px) rotate(-11deg);
    }
    to{
        opacity: .7;
        transform: scale(.85) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(19) {
    left: 84px;
    top: 173px;
    opacity: .26;
    transform: scale(.7);
    -webkit-animation: a19 2s ease-in-out forwards;
    -o-animation: a19 2s ease-in-out forwards;
    animation: a19 2s ease-in-out forwards;
}
@keyframes a19 {
    from{
        opacity: 0;
        transform: translate3d(50px, -135px, 0px) rotate(-3deg);
    }
    to{
        opacity: .26;
        transform: scale(.7) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(20) {
    left: 136px;
    top: 221px;
    opacity: .95;
    transform: scale(1.1);
    -webkit-animation: a20 2s ease-in-out forwards;
    -o-animation: a20 2s ease-in-out forwards;
    animation: a20 2s ease-in-out forwards;
}
@keyframes a20 {
    from{
        opacity: 0;
        transform: translate3d(-235px, 101px, 0px) rotate(0deg);
    }
    to{
        opacity: .95;
        transform: scale(1.1) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(21) {
    left: 178px;
    top: 186px;
    opacity: .26;
    transform: scale(.7);
    -webkit-animation: a21 2s ease-in-out forwards;
    -o-animation: a21 2s ease-in-out forwards;
    animation: a21 2s ease-in-out forwards;
}
@keyframes a21 {
    from{
        opacity: 0;
        transform: translate3d(160px, -174px, 0px) rotate(-16deg);
    }
    to{
        opacity: .26;
        transform: scale(.7) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(22) {
    left: 46px;
    top: 216px;
    opacity: .75;
    transform: scale(.9);
    -webkit-animation: a22 2s ease-in-out forwards;
    -o-animation: a22 2s ease-in-out forwards;
    animation: a22 2s ease-in-out forwards;
}
@keyframes a22 {
    from{
        opacity: 0;
        transform: translate3d(-93px, 115px, 0px) rotate(29deg);
    }
    to{
        opacity: .75;
        transform: scale(.9) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(23) {
    left: 208px;
    top: 237px;
    opacity: .8;
    transform: scale(1);
    -webkit-animation: a23 2s ease-in-out forwards;
    -o-animation: a23 2s ease-in-out forwards;
    animation: a23 2s ease-in-out forwards;
}
@keyframes a23 {
    from{
        opacity: 0;
        transform: translate3d(274px, -166px, 0px) rotate(-25deg);
    }
    to{
        opacity: .8;
        transform: scale(1) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(24) {
    left: 124px;
    top: 206px;
    opacity: .26;
    transform: scale(.7);
    -webkit-animation: a24 2s ease-in-out forwards;
    -o-animation: a24 2s ease-in-out forwards;
    animation: a24 2s ease-in-out forwards;
}
@keyframes a24 {
    from{
        opacity: 0;
        transform: translate3d(-217px, 36px, 0px) rotate(-29deg);
    }
    to{
        opacity: .26;
        transform: scale(.7) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(25) {
    left: 100px;
    top: 258px;
    opacity: .7;
    transform: scale(1.1);
    -webkit-animation: a25 2s ease-in-out forwards;
    -o-animation: a25 2s ease-in-out forwards;
    animation: a25 2s ease-in-out forwards;
}
@keyframes a25 {
    from{
        opacity: 0;
        transform: translate3d(23px, -240px, 0px) rotate(-29deg);
    }
    to{
        opacity: .7;
        transform: scale(1.1) translate3d(0, 0, 0) rotate(0);
    }
}
#tags a:nth-child(26) {
    left: 162px;
    top: 243px;
    opacity: .65;
    transform: scale(.85);
    -webkit-animation: a26 2s ease-in-out forwards;
    -o-animation: a26 2s ease-in-out forwards;
    animation: a26 2s ease-in-out forwards;
}
@keyframes a26 {
    from{
        opacity: 0;
        transform: translate3d(-331px, 243px, 0px) rotate(-20deg);
    }
    to{
        opacity: .65;
        transform: scale(.85) translate3d(0, 0, 0) rotate(0);
    }
}

③js：
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/tagcanvas.min.js"></script>  //球形文字运动效果
<script type="text/javascript">
    window.onload = function () {
        try {
            var i, et = document.getElementById('tags').childNodes;
            for (i in et) {
                et[i].nodeName == 'A' && et[i].addEventListener('click', function (e) {
                    e.preventDefault();
                });
            }

            TagCanvas.Start('myCanvas', 'tags', {
                textColour: '#cd3400',  //文字颜色
outlineColour: 'transparent',  //hover文字边框颜色
reverse: true,                depth: 0.8,
                dragControl: true,
                decel:0.95,
                maxSpeed: 0.05,
                initial: [-0.2, 0]
            });
        } catch (e) {
            // something went wrong, hide the canvas container
            //document.getElementById('myCanvasContainer').style.display = 'none';
}
        setTimeout(() =>{
            document.getElementById('myCanvas').style.display = "block";   //控制球形文字运动效果3.5s显示            document.getElementById("tags").classList.remove("active");      //控制文字四周进入后3.5s隐藏
        },3500);
    };
</script>