JavaScript實(shí)現(xiàn)代碼雨效果
更新時(shí)間：2022年01月13日 10:19:26 作者：HAI6545
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)代碼雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android中Okhttp3實(shí)現(xiàn)上傳多張圖片同時(shí)傳遞參數(shù)
本篇文章主要介紹了Android中Okhttp3實(shí)現(xiàn)上傳多張圖片同時(shí)傳遞參數(shù) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
js對象轉(zhuǎn)json數(shù)組的簡單實(shí)現(xiàn)案例
本篇文章主要是對js對象轉(zhuǎn)json數(shù)組的簡單實(shí)現(xiàn)案例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
根據(jù)經(jīng)緯度計(jì)算地球上兩點(diǎn)之間的距離js實(shí)現(xiàn)代碼
最近用到了根據(jù)經(jīng)緯度計(jì)算地球表面兩點(diǎn)間距離的公式，然后就用JS實(shí)現(xiàn)了一下，根據(jù)地球是一個(gè)光滑的球面以及并不是一個(gè)真正的圓球體，而是橢球延伸出兩種方法，感興趣的你可以參考下2013-03-03
詳解前端自動(dòng)化工具gulp自動(dòng)添加版本號
這篇文章主要介紹了詳解前端自動(dòng)化工具gulp自動(dòng)添加版本號 ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-12
深入理解JavaScript系列（16） 閉包（Closures）
本章我們將介紹在JavaScript里大家經(jīng)常來討論的話題 —— 閉包（closure）。閉包其實(shí)大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來討論下閉包，看看ECMAScript中的閉包內(nèi)部究竟是如何工作的2012-04-04
這篇文章主要為大家詳細(xì)介紹了如何編寫一個(gè) JavaScript 方法來檢測瀏覽器是否支持特定的 CSS3 屬性,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
兼容FF和IE的動(dòng)態(tài)table示例自寫
Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格的文章有很多，但大多數(shù)都不兼容FF和IE，于是手寫了一個(gè)，經(jīng)測試效果還不錯(cuò)，特此與大家分享，感興趣的朋友不要錯(cuò)過2013-10-10
設(shè)為首頁加入收藏兼容360/火狐/谷歌/IE等主流瀏覽器的代碼
不用找了我試過好多次ie、火狐、谷歌瀏覽器此代碼都是不可逆兼容，想把這個(gè)問題完全解決，方法就是像其他主流網(wǎng)站一樣，下面是我的簡單解決方案2013-03-03
JavaScript?split()方法定義及更多實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript?split()方法定義及更多實(shí)例的相關(guān)資料,js里的split()方法大家都知道用于將字符串轉(zhuǎn)化為字符串?dāng)?shù)組,文中通過代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了js如何獲取元素下面所有的li，有哪些方法,需要的朋友可以參考下2014-04-04