web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画

这篇具有很好参考价值的文章主要介绍了web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


效果图

vue3 关闭全局事件总线监听,JavaScript,web前端,css,javascript,前端,css,html,web前端,web


vue3 关闭全局事件总线监听,JavaScript,web前端,css,javascript,前端,css,html,web前端,web文章来源地址https://www.toymoban.com/news/detail-849283.html


html

<div class="container"></div>

JavaScript

// 祝词
var words = [
    '健康码常绿',
    '股票飙红',
    '生意兴隆',
    '财源广进',
    '心想事成',
    '永远十八',
    '身体健康',
    '大富大贵',
    '大吉大利',
    '万事如意',
    '美梦成真',
    '吉祥如意',
    '鸿运当头',
    '五福临门',
    '吉星高照',
    '好运连连',
    '八面春风',
    '百事亨通',
    '万事大吉',
    '喜气洋洋',
    '岁岁今日',
    '年年今朝',
    '和气吉祥',
    '百事顺遂',
    '福星高照',
    '前途光明',
    '喜上眉梢',
    '荣华富贵',
    '家庭和睦',
    '爱情事业双丰收',
    '工作顺利',
    '百年好合',
    '龙马精神',
    '出入平安',
    '前程万里',
    '年年有余',
    '万事胜意',
    '福如东海',
    '寿比南山',
    '学业有成',
    '大展宏图',
    '顺风顺水',
    '事业辉煌',
    '生意红火',
    '吉时吉日疾如风',
    '丰年丰月如风增',
    '增福增财增长寿',
    '寿山寿海寿长生',
    '生财生利生贵子',
    '子孝孙贤代代荣',
    '荣华富贵年年有',
    '有钱有势有前程'
];

// 生成指定范围随机数(保留小数点后两位)
function randomNum(min, max) {
    var num = (Math.random() * (max - min + 1) + min).toFixed(2);
    return num;
}

// 初始函数
function init() {
    var container = document.querySelector('.container');
    var f = document.createDocumentFragment(); //创建文档片段对象

    words.forEach(w => {
        var word_box = document.createElement('div');
        var word = document.createElement('div');

        word.innerText = w;
        word.classList.add('word');

        // 随机生成色相值(0为红色、120为绿色、240为蓝色、360为红色)
        var hue = randomNum(0, 240);
        word.style.color = 'hsl(' + hue + ',100%,65%)';

        word_box.classList.add('word-box');
        // 生成随机数值,并赋值给自定义属性
        word_box.style.setProperty('--margin-top', randomNum(-40, 20) + 'vh');
        word_box.style.setProperty('--margin-left', randomNum(6, 35) + 'vw');
        word_box.style.setProperty('--animation-duration', randomNum(8, 20) + 's');
        word_box.style.setProperty('--animation-delay', randomNum(-20, 0) + 's');

        word_box.appendChild(word);
        f.appendChild(word_box);
    })
    container.appendChild(f);
}

// 绑定加载事件
window.addEventListener('load', init);

style

* {
    margin: 0;
    padding: 0;
}

:root {
    /* 自定义属性,这几个属性等会是通过js随机生成,通过var函数可对其调用 */
    /* 上外边距 */
    --margin-top: 0;
    /* 左外边距 */
    --margin-left: 0;
    /* 动画时长 */
    --animation-duration: 0s;
    /* 动画延迟时间 */
    --animation-delay: 0s;
}

body {
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #111;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 设置视距 */
    perspective: 1300px;
}

div {
    /* 所有div默认开启3D属性 */
    transform-style: preserve-3d;
}

.word-box,
.word-box .word {
    position: absolute;
    /* 执行动画:动画名 时长 线性的 无限次播放 */
    animation: rotY 0s linear infinite;
    /* 设置动画时长 */
    animation-duration: var(--animation-duration);
    /* 设置动画延迟 */
    animation-delay: var(--animation-delay);
}

.word-box {
    margin-top: var(--margin-top);
}

.word-box .word {
    margin-left: var(--margin-left);
}

.word-box .word {
    /* 反向动画 */
    animation-direction: reverse;
}


/* 定义动画 */

@keyframes rotY {
    to {
        /* 1turn表示一圈 */
        transform: rotateY(1turn);
    }
}

到了这里,关于web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包