坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

[盲盒教程] H5盲盒美化教程

  [复制链接]
坏蛋网络官方 发表于 2022-6-20 02:12:41 | 显示全部楼层 |阅读模式
美化首页 增加特效
下面通霸云整理了几点
数据头像显示增加10个左右
增加樱花飘落效果
增加鼠标点击爱心效果
增加轮播图下 GIF图片


头像展示数据增加
首页樱花特效
添加网易云
添加头像展示
  1. <!-- total -->
  2.           <div <span class="token keyword">class</span>="total">
  3.             <div <span class="token keyword">class</span>="lay<span class="token token-operator punctuation">-</span>modal<span class="token token-operator punctuation">-</span>form<span class="token token-operator punctuation">-</span>tabs"></p>
  4.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou1<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  5.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou2<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  6.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou3<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  7.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou4<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  8.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou5<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  9.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou6<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  10.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou7<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  11.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou8<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  12.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou9<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
  13.                 <span <span class="token keyword">class</span>="total<span class="token token-operator punctuation">-</span>cover<span class="token token-operator punctuation">-</span>item" <span class="token keyword">style</span>="background<span class="token token-operator punctuation">-</span>image<span class="token punctuation">:</span> url<span class="token punctuation">(</span>http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/touxiang/tou10<span class="token punctuation">.</span>jpg<span class="token punctuation">)</span>;"></span>
复制代码


8.png

首页樱花 点击 特效 GIF图片
演示如下 这里采用别人的js 你们到时候自己搬到自己站点 创建目录复制进去就可以了

代码如下

  1.         <!-- 樱花飘落效果 -->
  2.         <script <span class="token keyword">type</span>="text/javascript" src="https<span class="token punctuation">:</span>//api<span class="token punctuation">.</span>azpay<span class="token punctuation">.</span><span class="token keyword">cn</span>/<span class="token number">729</span>/<span class="token number">5</span><span class="token punctuation">.</span>js"></script>   
  3.          <!-- 鼠标点击爱心效果 -->
  4. <script <span class="token keyword">type</span>="text/javascript" src="https<span class="token punctuation">:</span>//api<span class="token punctuation">.</span>azpay<span class="token punctuation">.</span><span class="token keyword">cn</span>/<span class="token number">729</span>/<span class="token number">1</span><span class="token punctuation">.</span>js"></script>  
  5.         <!-- GIF图片 -->
  6.         <img src="http<span class="token punctuation">:</span>//we7<span class="token punctuation">.</span>kjq66<span class="token punctuation">.</span><span class="token keyword">cn</span>/<span class="token number">1634554954</span><span class="token punctuation">.</span>gif">
复制代码
9.png
添加音乐代码如图所示
现在好像很多盲友都在问如何添加音乐 这里给您演示下

  1.        <!--网易云播放代码-->
  2.         <iframe frameborder="no" border="<span class="token number">0</span>" marginwidth="<span class="token number">0</span>" marginheight="<span class="token number">0</span>" <span class="token keyword">width</span>=<span class="token number">330</span> height=<span class="token number">110</span> src="//music<span class="token punctuation">.</span><span class="token number">163</span><span class="token punctuation">.</span>com/outchain/player?type=<span class="token number">0</span>&id=<span class="token number">7024828885</span>&auto=<span class="token number">1</span>&height=<span class="token number">90</span>"></iframe>
  3.         <!--代码结束-->
复制代码


20211108161000.png



想说又不敢说,说了又怕被拒绝,拒绝了又怕尴尬,就是这样的。内心很痛苦的那种。
你好 发表于 2022-6-26 23:04:26 | 显示全部楼层
有竞争才有进步嘛
回复

使用道具 举报

你好 发表于 2022-6-27 01:23:08 | 显示全部楼层
过来看看的
回复

使用道具 举报

刘静 发表于 2022-6-27 18:00:59 | 显示全部楼层
帮帮顶顶!!
回复

使用道具 举报

起什么名字呢? 发表于 2022-6-27 22:27:11 | 显示全部楼层
看帖回帖是美德!
回复

使用道具 举报

你好 发表于 2022-6-28 02:25:17 | 显示全部楼层
看帖回帖是美德!
回复

使用道具 举报

江山狂念 发表于 2022-6-28 14:14:38 | 显示全部楼层
这是什么东东啊
回复

使用道具 举报

foryun 发表于 2022-6-29 14:49:35 | 显示全部楼层
看帖回帖是美德!
回复

使用道具 举报

qq12345 发表于 2022-6-30 09:58:57 | 显示全部楼层
我抢、我抢、我抢沙发~
回复

使用道具 举报

快速回复 返回顶部 返回列表