当前位置：网站首页免费源码 html5 css3 正文

利用jQuery实现电脑桌面用户登录界面特效

时间：2020-06-08 [html5 css3]作者：adminjie 浏览：157 次

特效描述：利用jQuery实现电脑桌面用户登录界面特效，利用jQuery实现电脑桌面用户登录界面特效

list-style: none; font-family: 微软雅黑, 宋体, "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.1; color: rgb(100, 100, 100); font-size: 24px; border-bottom: 1px solid rgb(235, 235, 235); background-color: rgb(255, 255, 255);">代码结构

1. 引入CSS

1 2	`<link` `rel=string" class="page_speeder_1624497207">"stylesheet"` `href="css/public.css">` `<link` `rel="stylesheet"` `href="css/animate.css">`

2. 引入JS

<script src="js/jquery.min.js"></script>

<script src="js/weather.js"></script>

<script src="js/particles.min.js"></script>

<script src="js/zhuti1.js"></script>

3. HTML代码

<!-- <div id="loading" style="background:#CC4444;color:#FFF;width:80px;padding-left:5px;z-index:999;position:absolute;line-height:22px">正在读取...</div> -->    <!--loading-->  <!-- <div class="loading">    <div class="loader">      <div class="loader_icn">        <div class="loader_cut">          <div class="loader_donut"></div>        </div>      </div>      <p>Loading...</p>    </div>  </div> -->  <!--//loading-->    <div id="tp-weather-widget"></div>    <div class="lock animated">        <div class="form">            <div class="pic"></div>            <div class="name">Lafite Wu</div>            <div class="input">                <input class="animated" type="password" placeholder="请输入密码" value="" />            </div>        </div>    </div>      <div class="container" id="particles-js">        <div class="nav">            <ul>                <li class="n_work"><img src="images/icon1.png"></li>                <li><img src="images/icon2.png"></li>                <li><img src="images/icon3.png"></li>                <li><img src="images/icon4.png"></li>                <li><img src="images/icon5.png"></li>                <li><img src="images/icon6.png"></li>                <li><img src="images/icon7.png"></li>                <li class="n_notices"><img src="images/icon8.png"></li>                <li class="n_lock"><img src="images/icon9.png"></li>                <li><img src="images/icon10.png"></li>                <li><img src="images/icon11.png"></li>                <li><img src="images/icon12.png"></li>                <li class="n_photo"><img src="images/icon13.png"></li>                <li><img src="images/icon14.png"></li>                <li><img src="images/icon15.png"></li>            </ul>        </div>        <div class="photo animated">            <div class="photo_exit">X</div>            <div class="title">精选壁纸</div>            <div class="small_pic">              <div class="img_cover">                <span class="progress"></span>              </div>              <img src="images/bg3.jpg">            </div>            <div class="small_pic">              <div class="img_cover">                <span class="progress"></span>              </div>              <img src="images/bg4.jpg">            </div>            <div class="small_pic">              <div class="img_cover">                <span class="progress"></span>              </div>              <img src="images/bg5.jpg">            </div>            <div class="small_pic">              <div class="img_cover">                <span class="progress"></span>              </div>              <img src="images/bg6.jpg">            </div>            <div class="small_pic">              <div class="img_cover">                <span class="progress"></span>              </div>              <img src="images/bg7.jpg">            </div>            <div class="small_pic">              <div class="img_cover">                <span class="progress"></span>              </div>              <img src="images/bg8.jpg">            </div>        </div>        <div class="notice">            <div class="n_x">X</div>            <div class="notice_title">温馨提示</div>            <div class="notice_content">              <ul>                <li>1.本网站采用全屏模式</li>                <li>2.可通过ESC退出全屏</li>                <li>3.建议全屏浏览，效果更佳</li>                <li>4.作品归lafitewu所有</li>                <li>5.未经本人允许，严禁商用</li>              </ul>            </div>        </div>        <div class="works animated">          <ul>            <li class="animated">              <div class="w_x">X</div>              <div class="w_font">后台注册页面</div>              <div class="w_content animated">                  <a href="preview/703246/2017-03-09/%E5%8E%9F%E5%88%9B%E4%BD%9C%E5%93%81/demo.html" target="_blank"><img src="./images/work1.png"></a>              </div>            </li>            <li class="animated">              <div class="w_x">X</div>              <div class="w_font">3D之九宫格</div>              <div class="w_content animated">                  <a href="preview/703246/2018-01-09/demo11/index.html" target="_blank"><img src="./images/work2.png"></a>              </div>            </li>            <li class="animated">              <div class="w_x">X</div>              <div class="w_font">个人简历模板</div>              <div class="w_content animated">                <a href="preview/703246/2018-01-02/resume1/index.html" target="_blank"><img src="./images/work3.png"></a>              </div>            </li>          </ul>       &nbs

点击下载

利用jQuery实现电脑桌面用户登录界面特效

大小 : 2.03 MB | 下载量 : 0 | 文件类型 : 压缩文件

转载请注明来源：利用jQuery实现电脑桌面用户登录界面特效

本文永久链接地址：https://www.adminjie.com/post/2774.html

免责声明：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

附：
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！

版权声明：
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的，若有侵犯你的权益请：点此维权站长会进行审查之后，情况属实的会在三个工作日内为您删除。