响应式3D标签（祝福版）

最新推荐文章于 2024-07-25 11:52:08 发布

zyyyyyy.

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量322

点赞数 6

文章标签：开发语言 html css 3d 前端

本文链接：https://blog.csdn.net/gvgfxjhv/article/details/136486344

版权

index.js

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

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

//初始化函数
function init(){
    var container = document.querySelector(".container");
    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,360);
        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(18,30)+'s');
        word_box.style.setProperty("--animation-delay",randomNum(-20,0)+'s');
        word_box.appendChild(word);
        container.appendChild(word_box);
    })
}

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>祝福版的3D标签</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container"></div>
    <script src="index.js"></script>
</body>
</html>

index.css

*{
    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;
    align-items: center;
    justify-content: center;
    background-color: #111;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 设置视觉距离 */
    perspective: 300px;
}

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);
}


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