网页全屏文字Css3D旋转特效动画

最新推荐文章于 2024-05-07 19:47:04 发布

冷色magic

最新推荐文章于 2024-05-07 19:47:04 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签： ES6 html5 css3

本文链接：https://blog.csdn.net/qq_36019174/article/details/83183515

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最终效果截图：

html代码：

<!DOCTYPE html>
<html>

<head>
       
    <meta charset="utf-8">
       
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
       
    <link rel="stylesheet" href="">
        <style type="text/css" media="screen">
        html {
            height: 100%;
            background: #041720;
            font-family: cursive;
        }
    </style>
</head>

<body>

    <script>

        ; (function (win, dom) {
            /**
             * [WordCloud 字符云]
             * @param {[type]} option [配置项]
             */
            var WordCloud = function (option) {

                var default_option = {
                    total: 100,//字符数量
                    interval: 20,//动画刷新时间间隔(ms)
                    speed: 2,//旋转速度
                    fontMinSize: 16,//字体最大尺寸（px）
                    fontMaxSize: 60,//字体最大尺寸（px）
                    text: '有一天或许这就是纪念' //文本内容
                };//默认配置
                this.option = Object.assign(default_option, option);//配置项定义
                this.init();//初始化
                this.animate();//动画
            }

            WordCloud.prototype = {
                init() {
                    var w = win.outerWidth, h = win.outerHeight;
                    var o = this.option;
                    var total = o.total, fontMinSize = o.fontMinSize, fontMaxSize = o.fontMaxSize, text = o.text, wordIndex = 0;
                    while (total--) {
                        var _ele = dom.createElement("div");
                        _ele.className = "wordcloud2018";
                        _ele.innerHTML = text.charAt(wordIndex++ % text.length);
                        _ele.style.color = '#' + ('000000' + Math.floor(Math.random() * (1 << 24)).toString(16)).slice(-6);
                        _ele.style.fontSize = fontMinSize + Math.random() * (fontMaxSize - fontMinSize) + "px";
                        _ele.style.position = "fixed";
                        _ele.style.left = Math.random() * w + "px";
                        _ele.style.top = Math.random() * h + "px";
                        _ele.style.transform = `rotateX(${Math.random() * 360}deg) rotateY(${Math.random() * 360}deg) rotateZ(${Math.random() * 360}deg)`;
                        dom.body.appendChild(_ele);
                    }
                },
                animate() {
                    var o = this.option;
                    var interval = o.interval, speed = o.speed;
                    var _eles = dom.getElementsByClassName("wordcloud2018");
                    setInterval(function () {
                        [].forEach.call(_eles, function (_ele, i) {
                            var strs = _ele.style.transform.split("(");
                            var rx = strs[1].slice(0, strs[1].indexOf("deg")) * 1 + speed,
                                ry = strs[2].slice(0, strs[2].indexOf("deg")) * 1 + speed,
                                rz = strs[3].slice(0, strs[3].indexOf("deg")) * 1 + speed;
                            _ele.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;

                        });
                    }, interval);

                }
            }

            win.WordCloud = WordCloud;

        })(window, document);

        var _wordCloud = new WordCloud({ total: 91, interval: 20, text: 'qwertyuiopasdfghjklzxcvbnm' });//创建实例

    </script>
</body>

</html>

冷色magic

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页全屏文字Css3D旋转特效动画

最终效果截图：html代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title&gt...
复制链接

扫一扫