css3+jquery仿win7开机效果
 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>仿WIN7开机效果</title>
  <style type="text/css">
  *{margin:0px;padding:0px;}
 a{width:64px;height:64px;background:url("images/1.png");display:block;margin:120px auto;}
 a:hover{background:url("images/2.png");}
 a:active{background:url("images/3.png");position:relative;top:6px;}
  </style>
 </head>
 <body>
  <a href="index.html"></a>
 </body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>开机桌面</title>
  <style type="text/css">
   *{margin:0px;padding:0px;}
 body{background:url("images/xk.jpg")no-repeat;background-size:100% 100%;height:700px;}
 #begin{height:60px;width:100%;background:rgba(255,128,255,0.5);position:fixed;bottom:0px;left:0px;}
 #meta{position:absolute;bottom:60px;left:0px;width:400px;height:400px;display:none}
 #startmenu{border:1px,solid #102a3e;height:400px;background:#619b9b;background:-moz-linear-gradient(top,rgba(255,128,255,0.7),rgba(0,128,192,0.5)50%,rgba(206,27,216,0.5));padding:10px;}
 #programs{float:left;background:#ffffff;border:1px solid #9900ff;width:235px;height:400px;overflow:auto;}/*overflow溢出部分显示以滚动条下拉的形式*/
 #programs li{list-style:none;}
 #programs a{display:block;border:1px solid #ffffff;color:#4b4b4b;text-decoration:none;width:220px;margin:4px;padding:3px;}
 #programs a img{border:0px;vertical-align:middle;margin-right:5px;}
 #programs a:hover{border:1px solid #9933tt;box-shadow:1px 1px 3px #cc00cc;background:-moz-linear-gradient(top,#cc99ff,#cc33ff);}
 #links{float:left;margin-left:30px;position:relative;padding-top:30px;}
 #links li{list-style:none;}
 #links li a{text-decoration:none;color:#fff;font-size:12px;line-height:30px;display:block;border:1px solid transparent;padding:3px 10px;}
 #links li a:hover{background:-moz-linear-gradient(top,#cc99ff,#cc33ff);box-shadow:1px 1px 3px #cc00cc;}
 #links .icon{position:absolute;right:10px;top:-40px;}
 
  </style>
    <script language="javascript" src="js/jquery.min.js">/*--安装jQuery库--*/</script>
  <script language="javascript" src="js/rainyday.js">/*--安装jQuery库--*/</script>
 
 </head>
 <body>
  <div id="begin">
 <img src="data:images/4.png" width="60px";height="60px" οnmοuseοver="$('#meta').show();"; οnclick="$('#meta').hide();"/>
 <div id="meta">
  <div id="startmenu">
   <ul id="programs">
    <li><a href="#"><img src="data:images/firefox-32.png"/>Mozilla Firefox</a></li>
    <li><a href="#"><img src="data:images/chrome.png"/>Goole Chrome</a></li>
    <li><a href="#"><img src="data:images/safari.png"/>Safari</a></li>
    <li><a href="#"><img src="data:images/ie.png"/>Internet Explorer</a></li>
    <li><a href="#"><img src="data:images/twitter_32.png"/>Twitter</a></li>
    <li><a href="#"><img src="data:images/rss_32.png"/>RSS</a></li>
    <li><a href="#"><img src="data:images/opera.png"/>Opera</a></li>
   </ul>
   <ul id="links">
    <li class="icon"><img src="data:images/folder.png"/></li>
    <li><a href="#">我的电脑</a></li>
    <li><a href="#">控制面板</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Opera</a></li>
    <li><a href="#">RSS</a></li>
   </ul>
  
  </div>
 </div>
  </div>
 </body>
</html>

css3+jquery仿win7开机效果相关推荐

  1. Arctext.js - 基于 CSS3 jQuery 的文本弯曲效果

    Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...

  2. html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...

    本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...

  3. 微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果

    最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 "CSS3"! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件, ...

  4. css3+jQuery制作导航菜单（带动画效果）

    <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...

  5. [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

    HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...

  6. HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

    HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...

  7. 微信大转盘 java_[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果

    [Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果 0 2014-03-19 02:00:24 上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑 ...

  8. vue之动画( 仿jquery的slideToggle动画效果 )

    Vue提供了transition组件,写法: <transition name="box"></transition> 在进入/离开的过渡中,会有 6 个 ...

  9. html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

    当前位置:编程学习 > html/css >> HTML5 实现小车动画效果(Canvas/CSS3/JQuery) HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来 ...

最新文章

  1. html语言分行,Markdown内嵌Html语言
  2. 从Hadoop集群中移除一块磁盘的操作
  3. java wed登录面 代码_java web 登录界面
  4. ImageView－－－属性android:background与android:src的区别
  5. 一次误操作导致的gi psu升级失败
  6. CentOS操作系统keepalived安装步骤
  7. Python实现词云图的3种方式（词频，一段文本，自定义样式）
  8. 视频投屏技术原理分享
  9. 动态场景下的语义SLAM的简单实现（基于YOLOv5目标检测）
  10. 初见安~这里是樱狸的博客目录~
  11. 数控车床 刀尖补偿用法 G41 G42 G40
  12. Python3自然语言（NLTK）——语言大数据
  13. Window应急响应（七 NesMiner挖矿病毒）
  14. 一分钟带你了解全链路测试
  15. python 费马检测
  16. NB-IOT修改KV值的方法
  17. suds对接web service
  18. 计算机视觉的就业如何？计算机视觉好找工作吗？
  19. 法制日报：要在法律上“悉心关照”百度
  20. 做自媒体没素材怎么办？

热门文章

  1. 神经网络各个部分的作用 彻底理解神经网络
  2. Python如何入门？直接按这个方式玩炸弹超人小游戏，就能掌握编程
  3. 2020年云计算全国职业院校技能大赛（高职组）--容器云（1+x）商城系统部署
  4. robots里屏蔽百度和GG以外的蜘蛛
  5. 查询具有最低价格的的彩色打印机的制造商
  6. linux命令lha用法详解
  7. 【Win10 UWP】URI Scheme（一）：Windows Store协议的解析和使用
  8. 让人感慨的21个故事
  9. html css奥义之血轮进化轮回究极无敌眼
  10. 报错：Error querying database. Cause: java.sql.SQLException: Access denied for user ‘root‘@‘localhost‘