css3+jquery仿win7开机效果

最新推荐文章于 2020-12-28 11:11:48 发布
最新推荐文章于 2020-12-28 11:11:48 发布
阅读量841 收藏
点赞数
分类专栏： web前端
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="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="images/firefox-32.png"/>Mozilla Firefox</a></li>
    <li><a href="#"><img src="images/chrome.png"/>Goole Chrome</a></li>
    <li><a href="#"><img src="images/safari.png"/>Safari</a></li>
    <li><a href="#"><img src="images/ie.png"/>Internet Explorer</a></li>
    <li><a href="#"><img src="images/twitter_32.png"/>Twitter</a></li>
    <li><a href="#"><img src="images/rss_32.png"/>RSS</a></li>
    <li><a href="#"><img src="images/opera.png"/>Opera</a></li>
   </ul>
   <ul id="links">
    <li class="icon"><img src="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>

图片

图片

图片

图片

图片

图片
想旅游咯
关注
专栏目录
python开发windows界面_Python GUI编程(Tkinter) windows界面开发
weixin_39744316的博客
11-21 797
Python实现GUI简单的来说可以调用Tkinter库，这样一般的需求都可以实现，显示简单的windows窗口代码如下：python_gui.py1 #!C:\Python27\python.exe2 # -*- coding:UTF-8 -*-34 import Tkinter56 def center_window(w = 300, h = 200):7 ws = root.winf...
用树莓派实现远程唤醒
白告羊羽的博客
07-14 7625
由于偶尔要在外远程连接家里的电脑，家里的电脑一直都是开着的。电脑长期开着，有很长一段时间都是空闲的，不仅浪费电也会影响到硬件的寿命，因此希望能远程遥控，在有需要的时候唤醒主机。
js仿360开机效果
11-30
本文实例为大家分享了js仿360开机效果的具体代码，供大家参考，具体内容如下 实现效果： 1.点击关闭图片按钮先往下退出再往右退出 实现步骤： 1.封装运动函数 2.给图片上的关闭设置一个盒子 3.给关闭盒子注册点击事件点击后 4.下面图片高度为0，设置一个缓动动画 5.上面图片宽度为0，设置一个缓动动画 缓动动画代码（带回调函数）：` function getStyle(obj,attr){ //兼容性写法获得样式 if(window.getComputedStyle){ return window.getComputedStyle(obj, null
HTML+CSS 模仿Windows 7 桌面效果
weixin_34174105的博客
06-17 1006
     前一阵在园子里看到一篇文章《使用css3仿造window7的开始菜单》，文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果，很久以来一直被WPF/Silverlight 山上的风景所吸引，未成想其他的山也同样引人入胜。于是心血来潮也尝试着做了一个Windows 7 桌面效果，先来看几张截图吧。 桌面程序鼠标Hover 效果： 任务栏程序鼠标Hover 效果： ...
jquery 仿win7桌面效果
01-08
jquery 仿win7桌面效果 打开创建窗口 拖动 窗口最大 最小话 窗口内容采用iframe方式加载
仿win7桌面效果的jQuery代码
04-04
仿win7桌面效果的jQuery代码…
HTML+CSS制作Windows启动加载动画
道阻且长，行则将至。
12-28 955
HTML+CSS制作Windows启动加载动画 效果图如下： HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Windows加载动画</titl
技术淘宝
热门推荐
dicha7140的博客
06-23 2万+
???? ???? ???? ????精度前端学习 ——前端开发100天（置顶） http://alloyteam.github.io/CodeGuide/https://github.com/AlloyTeam/CodeGuide cmd控制台的小技巧：可以直接将文件夹/文件丢进去，这样就会打印出该路径了。 舒服的字体家族样式： font: 300 16px/1.8 ...
笔记，后期整理
weixin_30278237的博客
08-06 8306
VM 虚拟各种系统的工具 安装目录 不要放在C盘 需要下载的镜像Windows NT win7 xp server08R2 server12类Nnix centos 6/7/8 ubuntu 14/16/18 kali安装 win7 1g=1024M1M=1024KB1KB=1024bit1bit 是一个字节 一个字节就是8位由0或者1组成（二进制） 10 进制0-9组成的数字...
实例7：实现仿Windows7图片预览窗格效果
程序员深夜写bug
01-04 1100
1、布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="m
Javascript实现WOS模仿Windows7效果
02-28
该实例用JavaScript来模拟Windows效果，代码小，注释全，另外，JavaScript角本及资源文件(CSS,图片等)均采用动态加载，实现了按需加载。 另外对NodeJS感兴趣的，可以给我发邮件，我给你NodeJS的Demo.
动态界面（开机动画特效）
04-16
动态界面（开机动画特效）动态界面（开机动画特效）动态界面（开机动画特效）动态界面（开机动画特效）
HTML5微软Win10转圈加载开机动画的纯CSS3实现
10-18
首发实现，关于这精致的动画，网上已有些相关实现方案，唯独没有HTML5实现，笔者在此给出纯CSS3实现的版本，化繁为简。以最简洁的方式实现最接近原生的效果，并在此基础上加入了增强色彩渐变。 不可否认，原生动画更加的流畅自然。为了接近自然，测试过很多参数
JS实现仿Windows7风格的网页右键菜单效果代码
11-24
本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码。分享给大家供大家参考。具体如下： 这是一款JS仿Windows7风格的网页右键菜单，可以多级展开的右键菜单，原生JS。可参考性强，学习JavaScript的朋友不可错过。本菜单用户体验极佳，兼容性良好，无jQuery。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
jquery动画
weixin_34220623的博客
04-09 77
$("#my_top").slideDown("slow"); //向下滑动显示 $("#my_top").slideUp("slow"); //向上滑动隐藏 转载于:https://www.cnblogs.com/duanzhenzhen/p/10678676.html
html+css+js 模拟win7桌面
weixin_30301449的博客
11-22 416
不贴代码了，直接上传附件。 附件下载： win7desktop 转载于:https://www.cnblogs.com/deeround/p/4986241.html
360开机动画
xyw_jzj5201314的博客
11-11 1124
360开机动画 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 322px; position: fixed; bottom: 0; r
jQuery 动画篇
mayuxin1234的博客
12-02 456
1、动画基础隐藏和显示（show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置） （1）隐藏元素的hide方法 快捷参数： .hide("fast / slow") 'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏 {CSDN:CODE:202203
HTML5+CSS3+jQuery构建视频播放器教程
使用CSS3可以为播放器添加各种视觉效果，如阴影、圆角、过渡和动画。在"css/style.css"中定义播放器的样式。同时，jQuery可以用于实现与用户的交互，例如控制按钮的响应、进度条的更新等。 4. JavaScript配置和事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值