新增第146个小实例：祝福版的3D标签云动画特效

2022-05-03 16:52:09 +08:00 · 2022-05-03 16:52:09 +08:00 · 3774516e13
parent 0250f8ad59
commit 3774516e13
4 changed files with 171 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -152,4 +152,5 @@
 142. HTML5+CSS3+JS小实例：数据碎片故障风科技背景动画特效
 143. HTML5+CSS3小实例：抖音LOGO故障风文字动画特效
 144. HTML5+CSS3小实例：图片悬停旋转堆叠特效
-145. HTML5+CSS3小实例：3D分割图片悬停拼接特效
+145. HTML5+CSS3小实例：3D分割图片悬停拼接特效
+146. HTML5+CSS3+JS小实例：祝福版的3D标签云动画特效
--- a/code/146/146.css
+++ b/code/146/146.css
@ -0,0 +1,60 @@
+*{
+    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);
+    }
+}
--- a/code/146/146.html
+++ b/code/146/146.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>祝福版的3D标签云动画特效</title>
+    <link rel="stylesheet" href="146.css">
+</head>
+
+<body>
+    <div class="container"></div>
+    <script src="146.js"></script>
+</body>
+
+</html>
--- a/code/146/146.js
+++ b/code/146/146.js
@ -0,0 +1,92 @@
+// 祝词
+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);