Skip to content

Latest commit

 

History

History
86 lines (74 loc) · 1.68 KB

snowFlake.md

File metadata and controls

86 lines (74 loc) · 1.68 KB
<script type="text/javascript" src="../assets/xui.js"></script>

3.2.3 snowFlake

说明: 希望给页面上某个元素添加雪花飘洒的效果

使用及参数说明:
xui.snowFlake({
	id: string,
	direction: string
})
  • id表示雪花容器,必传
  • direction表示雪花的飘洒方向, 默认向右, 可以设置为left
  • 需要注意的是, 建议给你容器一个宽高 _
  • 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.人生当如冬之纯洁.

人生当如冬之纯洁 Pure As Snow
<style type="text/css"> #snow{ width: 100%; height: 200px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9; background: linear-gradient(to bottom, #7dbacc, #fafcfd); } </style> <script type="text/javascript"> xui.snowFlake({ id: 'snow', }) </script>
xui.snowFlake({
	id: 'snow',
})

2.未若柳絮因风起

未若柳絮因风起
<style type="text/css"> #snow1{ width: 100%; height: 200px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9; filter: brightness(1.1); background: linear-gradient(to bottom, #000, #fafcfd); } </style> <script type="text/javascript"> xui.snowFlake({ id: 'snow1', direction: 'left', }) </script>
xui.snowFlake({
	id: 'snow1',
	direction: 'left',
})