<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/jquery.min.js"></script>
<script src="js/weather.js"></script>
<title>漂亮的jQuery电脑桌面界面特效</title>
</head>
<style>
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.lock {
z-index: 10;
position: absolute;
width: 100%;
height: 100%;
background: url(images/lock.jpg) no-repeat center;
background-size: 100%;
}
.form {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 250px;
height: 270px;
text-align: center;
background: rgba(255,255,255,.3);
}
.pic {
margin-top: 30px;
width: 80px;
height: 80px;
background: url(images/pic.jpg) no-repeat center;
background-size: 100%;
border-radius: 50%;
opacity:0.8;
}
.pic:hover {
cursor: pointer;
opacity: 1;
}
.name {
margin-top: 15px;
color: white;
font-size: 18px;
}
.input input {
margin-top: 20px;
255d255 255;px;
height: 30px;
text-indent: 10px;
}
.container {
z-index: 4;
position: relative;
width: 100%;
height: 100%;
background: url(./images/bg7.jpg) no-repeat center;
background-size: 100%;
overflow: hidden;
}
.nav {
z-index: 3;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px auto;
width: 1100px;
height: 60px;
background: rgba(229,232,237,.5);
}
.nav ul {
position: relative;
width: 98%;
top: 6px;
left: 13px;
right: 0;
bottom: 0;
margin: auto;
}
.nav ul li {
float: left;
text-align: center;
transition: .5s;
margin: 0 5px;
}
.nav ul li:hover {
cursor: pointer;
transform: scale(1.2);
}
.nav ul li img {
width: 80%;
}
/*====photo=====*/
.photo {
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background: rgba(210,210,212,.7);
display: none;
}
.title {
padding-top: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.small_pic {
position: relative;
float: left;
width: 32%;
height: 40%;
margin-top: 10px;
margin-left: 6px;
overflow: hidden;
}
.small_pic img {
z-index: 2;
position: relative;
width: 100%;
height: 100%;
transition: .5s;
}
.small_pic img:hover {
cursor: pointer;
transform: scale(1.2);
}
.img_cover {
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 60%;
height: 10%;
border-radius: 15px;
background: rgba(255,255,255,.6);
display: none;
}
.progress {
position: inherit;
left: 0;
width: 0%;
height: 100%;
border-radius: 15px;
background: green;
}
.notice {
z-index: 4;
position: absolute;
right: 0;
bottom: 0;
width: 240px;
height: 230px;
background: rgba(240,240,240,.8);
display: none;
}
.n_x,.w_x,.photo_exit {
position: inherit;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background: white;
right: 0px;
top: 4px;
transition: .3s;
}
.photo_exit {
right: 0;
top: 0;
}
.n_x:hover,.w_x:hover,.photo_exit:hover {
cursor: pointer;
transform: rotateZ(180deg);
}
.notice_title {
padding: 5px 0;
text-align: center;
font-size: 15px;
background: black;
color: white;
}
.notice_content {
margin-top: 10px;
width: 90%;
height: 85%;
font-size: 14px;
color: #1A1A1A;
/*background: red;*/
}
.notice_content ul li {
height: 30px;
width: 100%;
letter-spacing: 2px;
}
.notice_content ul li:hover {
cursor: pointer;
font-weight: bold;
}
.works {
z-index: 3;
position: absolute;
left: 10%;
right: 0px;
bottom: 30px;
top: 0px;
margin: auto;
width: 70%;
height: 80%;
display: none;
overflow: hidden;
}
.works ul {
width: 100%;
height: 100%;
}
.works ul li {
z-index: 3;
position: relative;
float: left;
width: 98px;
height: 100%;
background: rgba(240,240,240,.8);
border-left: 1px solid gray;
border-right: 1px solid gray;
display: none;
}
.works ul li:nth-of-type(2) {
border: none;
}
.w_x {
z-index: 5;
position: absolute;
right: 1px;
top: 0px;
display: none;
}
.w_font {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
font-size: 20px;
width: 18%;
height: 30%;
}
.w_content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90%;
height: 36%;
background: white;
display: none;
}
.w_content img {
width: 100%;
}
.w_con_one {
padding-top: 10px;
text-align: center;
}
.loading{position:fixed;z-index:999;top:0;left:0;display:table;width:100%;height:100%;background:#fff;text-align:center}.loading .loader{display:table-cell;vertical-align:middle}.loading p{margin-top:15px;color:#333}.loader_icn{opacity:.75;width:24px;height:24px;display:inline-block;-webkit-animation:clockwise .5s linear infinite;animation:clockwise .5s linear infinite}.loader_cut{width:12px;height:24px;overflow:hidden;position:absolute;top:0;left:0}.loader_donut{box-sizing:border-box;width:24px;height:24px;border:2px solid #000;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;position:absolute;top:0;left:0;background:0 0;margin:0;-webki
漂亮的jQuery电脑桌面界面特效.zip
版权申诉
89 浏览量
2023-09-21
00:00:36
上传
评论
收藏 2.04MB ZIP 举报
漂亮的jQuery电脑桌面界面特效.zip （33个子文件） 
js 
particles.min.js 23KB weather.js 786B zhuti1.js 2KB jquery.min.js 82KB css public.css 520B animate.css 71KB
index.html 19KB images 
icon8.png 2KB icon10.png 2KB
lock.jpg 249KB pic.jpg 32KB bg5.jpg 375KB work2.png 309KB work1.png 214KB icon6.png 3KB icon14.png 3KB icon1.png 2KB icon4.png 2KB icon11.png 2KB icon15.png 1KB icon5.png 2KB bg4.jpg 42KB icon7.png 2KB bg8.jpg 72KB bg3.jpg 114KB bg7.jpg 267KB icon3.png 2KB icon12.png 2KB icon13.png 2KB icon9.png 2KB bg6.jpg 61KB work3.png 305KB icon2.png 2KB资源评论
