博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery插件实现代码雨特效
阅读量:2353 次
发布时间:2019-05-10

本文共 923 字,大约阅读时间需要 3 分钟。

本文实例为大家分享了jquery插件实现代码雨特效的具体代码,供大家参考,具体内容如下

代码雨特效

提供大概思路,虽然和目标的效果不一样,但是很容易举一反三改出对应效果的

效果如下

代码部分

1

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>做个代码雨</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
    user-select:none;
   }
   #div{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    z-index: 1;
   }
   .item{
    font-size: 12px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    color: #2ecc71;
    -webkit-writing-mode:vertical-lr;
    /* animation: down 0.9s linear; */
   }
   /* 绘制动画帧 */
   @keyframes down{
    from{}
    to{
     opacity: 0;
     top: 100%;
    }
   }
  </style>
 </head>
 <body>
  <div id="div">
  </div>
 </body>
</html>

转载地址:http://lxevb.baihongyu.com/

你可能感兴趣的文章
如何成为月入25k的高级程序员?建议养成这7个习惯
查看>>
学 Java还是Python, 哪个更好找工作?
查看>>
Java基础知识:如何计算Java对象占用内存大小?
查看>>
一份Java程序员的珍藏书单,请您注意查收
查看>>
为什么这么多人Java基础薄弱?该如何提升?
查看>>
如何成为一名合格的Java程序员?
查看>>
spring框架中5种自动装配模式介绍
查看>>
如何学习Spring框架?有哪些建议?
查看>>
Java程序员烂大街了吗?是,也不是
查看>>
为什么学编程大部分人选Java编程语言?
查看>>
GL_SETS_OF_BOOKS 帐簿表
查看>>
RMAN参考使用手册(转)
查看>>
解决WEB ADI打开EXCEL文档时一直停留在"Your document is being created"界面的问题
查看>>
为什么删除文件后磁盘空间还是不变
查看>>
VNC server简单配置vnc
查看>>
win7 安装的offic2007
查看>>
rman本库恢复性测试
查看>>
IBM TSM磁带管理操作小记一则
查看>>
ORA-00258: NOARCHIVELOG 模式下的人工存档必须标识日志
查看>>
Java调用bat文件
查看>>