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