js -- 计算机这样高产“优雅的”诗特效

<p style="--order: 0;">不要急</p>
<p style="--order: 1;">正在加载</p>
<p style="--order: 2;">马上就好</p>
<noscript><p style="--order: 0;">要想诗歌</p><p style="--order: 1;">写得好</p><p style="--order: 2;">JavaScript</p><p style="--order: 3;">少不了</p>
</noscript>

html,body {height:100%;width:100%;
}
body {margin:0;background:linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#cdd115,#16d836,#15c8d1,#2b1de8,#dd00f3,#dd00f3);background-size:1800% 1800%;animation:rainbow 15s ease infinite;display:flex;flex-direction:column;justify-content:center;align-items:center;/*counter-reset:delay;*/
}
@keyframes rainbow {0% {background-position:0% 82%;
}
25% {background-position:50% 50%;
}
50% {background-position:100% 19%;
}
75% {background-position:100% 100%;
}
100% {background-position:0% 82%;
}
}p {font-size:30px;height:50px;line-height:50px;animation:slideup .6s cubic-bezier(0,0.9,0.1,1);margin:0;/*纯CSS方法失败*//*counter-increment:delay;animation-delay:calc( 50ms * ( counter(delay) - 1) );*/animation-delay:calc( 50ms * var(--order) );animation-fill-mode:backwards;color:white;
}
@keyframes slideup {from {color:transparent;transform:translateY(50px);
}
to {color:white;transform:translateY(0);
}
}

//Shift键磨损行为
const 词汇 = {2: ["垂杨", "新柳", "金嫩", "柔条", "柳丝", "闲柳", "花海","芳甸", "吐嫩", "摇绿", "绿卷", "浓翠", "横翠", "金碧","舒卷", "款款", "片片", "缕缕", "新晴", "笼晴", "韶光","婉媚", "温丽", "芊绵", "春华", "空灵", "春柔", "清婉","馨烈", "和婉", "清蕊", "清芬", "素约", "红素", "旖旎","飞花", "浮花", "落英", "花影", "芳丛", "浮香", "锦花","绣草", "烂漫", "芳踪", "镂玉", "雕琼", "繁枝", "素景","密叶", "稠花", "点水", "扑面", "风轻", "水胧", "倚暖"],3: ["玉丝纶", "落纷纷", "胭脂色","水溶溶", "不留痕", "几点春","邀春驻", "花映柳", "花深浅","树高低", "翻微风", "香接天"],4: ["曲岸垂杨", "千花万柳", "浓露飘香","软软东风", "水逝云卷", "繁花盈枝","百卉团团", "和风轻暖", "春光满树","秀色灼灼", "红尘倦客", "柳带摇风","香坠庭户", "水阔花飞", "瘦叶和风","叶叶心心", "眼迷魂牵", "浅粉深红" // 不够的话来点儿《生僻字》的歌词]
};
const 短模板 = [ //三言及以下//一言"啊",//二言"2","人啊","人呢",//三言"3","2呢","2啊","是2"
];
const 长模板 = [ //四言及以上//四言"4","22","3兮",//五言"23","32","4兮","22兮","是4","是22",//六言"33","42","24","222",//这里可以再兮一把，不过我懒得兮//七言"223","43","322","34","33兮","42兮","24兮","222兮"
];
const 长短模板 = [...短模板, ...长模板];
const 套模板 = 模板 => 模板.replace(/\d/g,长度 => 随机抽取(词汇[长度])
);
const 随机抽取 = 数组 => 数组[Math.round(Math.random() * (数组.length - 1))
];function 插入身体(诗句, 顺序) {const 段落 = document.createElement('p');段落.style.setProperty('--order', 顺序);段落.append(诗句);document.body.append(段落);
}
setInterval(() => {for (let 旧句子 of document.querySelectorAll('p'))旧句子.remove();const 长度因素 = Math.random() * 2 | 0;let 诗句;if (Math.random() > 0.5) // true 代表它是错落诗诗句 = Array(长度因素 + 6).fill(2333) //不填点什么map就不工作.map(() => 随机抽取(长短模板));else诗句 = Array(长度因素 * 2 + 4).fill(随机抽取(长模板));诗句.map(套模板).forEach(插入身体);
}, 1000);

js -- 计算机这样高产“优雅的”诗特效相关推荐

vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...
html缩放惯性,js带滚动惯性的视觉差特效插件
luxy.js一款js带滚动惯性的视觉差特效插件.该插件可以在页面中制作图片HTML内容滚动视觉差特效,并且在页面滚动时,带有惯性效果,非常炫酷. 安装可以通过npm来安装luxy.js插件. np ...
js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效
Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件.您通过简单的配置,既可以生成非常炫酷的半透明模糊的毛玻璃效果. 使用方法在HTML文件中引入. HTML结构创建HTML结构并使 ...
js 用迭代器模式优雅的处理递归问题
2019独角兽企业重金招聘Python工程师标准>>> 什么是迭代器循环数组或对象内每一项值,在 js 里原生已经提供了一个迭代器. var arr = [1, 2, 3] arr ...
js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...

js -- 计算机这样高产“优雅的”诗特效

js -- 计算机这样高产“优雅的”诗特效相关推荐

最新文章

热门文章

js -- 计算机这样高产“优雅的”诗 特效

js -- 计算机这样高产“优雅的”诗 特效相关推荐

最新文章

热门文章

js -- 计算机这样高产“优雅的”诗特效

js -- 计算机这样高产“优雅的”诗特效相关推荐