JavaScript實現(xiàn)代碼雨效果
更新時間：2022年01月13日 10:19:26 作者：HAI6545
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)代碼雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)代碼雨效果的具體代碼，供大家參考，具體內(nèi)容如下
<!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>代碼雨demo</title>
</head>
<style>
? * {
? ? padding: 0px;
? ? margin: 0px;
? }
?
? body,
? html {
? ? width: 100%;
? ? height: 100%;
? }
?
? #libao {
? ? width: fit-content;
? ? height: 100%;
? ? display: flex;
? ? font-size: 10px;
? ? background: #000;
? ? word-wrap: break-word;
? ? word-break: break-all;
? ? overflow: hidden;
? }
?
? span {
? ? min-width: 15px;
? ? /* 柵欄格最小寬度 */
? ? font-size: 10px;
? ? color: #58bc5b;
? ? position: relative;
? }
?
? p {
? ? width: 100%;
? ? position: absolute;
? ? text-align: center;
? }
?
? .color6 {
? ? color: #58bc5b;
? }
?
? .color5 {
? ? color: #58bc5bd6;
? }
?
? .color4 {
? ? color: #58bc5ba8;
? }
?
? .color3 {
? ? color: #58bc5b60;
? }
?
? .color2 {
? ? color: #58bc5b28;
? }
?
? .color1 {
? ? color: #58bc5b10;
? }
</style>
?
<body>
? <div id="libao">
? </div>
??
</body>
?
</html>效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
PhantomJS快速入門教程(服務器端的 JavaScript API 的 WebKit)
Phantom JS是一個服務器端的 JavaScript API 的 WebKit。其支持各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG2015-08-08
如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個需求,需要顯示溫濕度,網(wǎng)上找了一圈沒找到解決方法,所以只能自己寫一個,這篇文章主要給大家介紹了關于如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度的相關資料,需要的朋友可以參考下2022-03-03
JavaScript 有個 with 關鍵字, with 語句的原本用意是為逐級的對象訪問提供命名空間式的速寫方式. 也就是在指定的代碼區(qū)域, 直接通過節(jié)點名稱調(diào)用對象2011-05-05
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動操作代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
本文主要介紹了通過HTML，CSS，JS三種判斷橫屏豎屏的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript 可算是世界上最流行的編程語言，它曾被 Web 開發(fā)設計師貼上噩夢的標簽，雖然真正的噩夢其實是 DOM API，這個被大量的開發(fā)與設計師隨手拈來增強他們的 Web 前端的腳本語言，如今越來越被重視，雖則如此，JavaScript 仍然擁有很多讓人費解的東西。2010-02-02
javascript與webservice的通信實現(xiàn)代碼
關于javascript與webservice的通信，從理論上來說實現(xiàn)應該不難，主要是將服務器端的xml數(shù)據(jù)進行一個簡單的處理然后以一種適當?shù)男问秸宫F(xiàn)成來。2010-12-12
淺談js繼承的實現(xiàn)及公有、私有、靜態(tài)方法的書寫
下面小編就為大家?guī)硪黄獪\談js繼承的實現(xiàn)及公有、私有、靜態(tài)方法的書寫。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了js判斷鼠標左、中、右鍵哪個被點擊的方法,主要通過event.button事件來判斷鼠標點擊的類型,需要的朋友可以參考下2015-01-01
在一些電商網(wǎng)站上，經(jīng)?？吹接猩唐穲D片被放大查看的功能，所以本文將使用前端技術實現(xiàn)一個簡單的圖片放大鏡功能，希望能給大家?guī)硪欢ǖ膸椭?/div> 2023-06-06最新評論