此版為IPHONE5專用!!....
4/4S的版本,附件替換下載!!
這是我自己從大型主題中,把鎖屏分離出來!!
真的好搭...美的冒泡!!
圖片內紅字已註明該顯示資訊
如有人需要.....下班後我就放出來給大家玩!! (已釋出)
P.S我沒打算繁化,因為這個畫面,個人認為不繁化比較美!!
以下為效果圖:

IPHONE5
附件下載:
https://docs.google.com/file/d/0B44I...it?usp=sharing
4/4S版本修改法
1. 打開Resources/Css/Lock.css
2. 將裡面所有內容去除替換掉以下代碼:
代碼:
*{
margin: 0;
padding: 0;
width: 320px;
height: 480px;
font-family: Helvetica;
}
#Layer{
width: 320px;
height: 480px;
position: absolute;
top: 0px;
left: 0px;
z-index:-1;
}
#Lock{
background:url('../Images/Lock.png') center no-repeat;
background-size: 52px 59px;
width: 320px;
height: 60px;
position: absolute;
top: 247px;
left: 0px;
margin: 0 auto;
z-index:0;
}
#title{
position: absolute;
top: 60px;
right: 0px;
width: 96.7px;
height: 20px;
text-align: left;
font-size: 14px;
font-weight: lighter;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
z-index: 14;
-webkit-animation: opa 30s linear infinite normal;
}
*-webkit-keyframes opa {
0% {
opacity : 1;
color: #FFA500;
}
16%{
opacity : 0.3;
}
33% {
opacity : 1;
color: #00a2ff;
}
50%{
opacity : 0.3;
}
67% {
opacity : 1;
color: #fff000;
}
83%{
opacity : 0.3;
}
100% {
opacity : 1;
color: #FFA500;
}
}
.stretch {
width:100%;
height:100%;
}
.ClockWidget {
position: absolute;
text-align:center;
margin-left:0px;
margin-top:0px;
width: 320px;
height: 50px;
top: 303px;
right: 0px;
down: 0px;
left: 0px;
z-index: 2;
}
#clock {
font-weight: lighter;
color: #FFFFFF;
opacity: 0.9;
font-size: 30px;
text-shadow: #000000 4px 2px 2px, #000000 0px 0px 6px ;
padding: 0 2px;
}
#second {
position: relative;
top: -6px;
font-weight: lighter;
color: #b9b3b4;
opacity: 0.8;
font-size: 20px;
text-shadow: #000000 4px 2px 2px, #000000 0px 0px 6px;
padding: 0 2px;
}
#ampm {
position:absolute;
top: 27px;
right: 0px;
font-weight: lighter;
color: #00b5f0;
opacity: 0.9;
font-size: 20px;
text-shadow: #000000 4px 2px 2px, #000000 0px 0px 6px ;
}
.month {
position: absolute;
text-align: center;
width: 320px;
height: 100px;
top: 42px;
font-size: 15px;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
font-weight: lighter;
z-index: 2;
text-transform: uppercase;
opacity: 0.8;
}
.year {
position: absolute;
text-align: center;
width: 320px;
height: 100px;
top: 30px;
font-size: 30px;
color: #b9b3b4;
text-shadow: #000000 4px 2px 2px, #000000 0px 0px 6px ;
font-weight: lighter;
opacity:0.8;
padding: 2px 0px 2px 0px;
z-index: 1;
text-transform: uppercase;
}
.main {
text-align:center;
color: rgba(209, 209, 209, 1);
text-shadow: #000000 4px 2px 2px, #000000 0px 0px 6px ;
font-size:11px;
font-weight: lighter;
padding:2px 2px 2px 2px;
background-color:transparent;
}
#CalendarWidget{
text-align:center;
margin-left:0px;
margin-top:01px;
width: 320px;
height: 50px;
position: absolute;
top: 171px;
right: 0px;
down: 0px;
left: 0px;
font-weight: lighter;
}
#daysofweek {
color: rgba(209, 209, 209, 1);
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
font-size: 10px;
padding: 0 2px;
opacity : 0.8;
}
#days {
width: 0px;
height: 0px;
color: rgba(209, 209, 209, 1);
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
font-size: 11px;
}
#today {
border-radius: 2px;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
font-size: 12px;
font-weight: bold;
padding: 0 2px;
opacity: 1;
}
#WeatherContainer{
position: absolute;
left: 0px;
top: 0px;
width: 320px;
height: 400px;
}
#TextContainer{ /* Other */
font-size:18px;
font-weight: lighter;
color:black;
}
#city{ /* Weather City Position */
position: absolute;
top: 85px;
right: 0px;
width: 96.7px;
height: 20px;
text-align: left;
font-size: 12px;
font-weight: lighter;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
z-index: 14;
}
#temp{ /* Weather Temperature Position */
position: absolute;
top: 120px;
left: 0px;
width: 106.7px;
height: 106.7px;
text-align: center;
font-size: 32px;
color: orange;
font-weight: lighter;
opacity: 0.8;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
text-transform: uppercase;
z-index: 14;
}
#lowText{
position: absolute;
top: 137.5px;
right: 10px;
width: 66.7px;
height: 20px;
text-align: center;
font-size: 12px;
font-weight: lighter;
color: #00CCFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
z-index: 14;
opacity: 0.9;
}
#low{
position: absolute;
top: 125px;
right: 10px;
width: 66.7px;
height: 20px;
text-align: center;
font-size: 12px;
font-weight: lighter;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
text-transform: uppercase;
z-index: 14;
}
#highText{
position: absolute;
top: 137.5px;
right: 0px;
width: 96.7px;
height: 20px;
text-align: left;
font-size: 12px;
font-weight: lighter;
color: yellow;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
z-index: 14;
opacity: 0.9;
}
#high{
position: absolute;
top: 125px;
right: 66.7px;
width: 30px;
height: 20px;
text-align: center;
font-size: 12px;
font-weight: lighter;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
text-transform: uppercase;
z-index: 14;
}
#sunrise {
position: absolute;
top: 27.5px;
left: 37px;
width: 50px;
height: 15px;
text-align: left;
font-size: 11px;
font-weight: lighter;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 4px ;
opacity: 0.8;
z-index: 22;
}
#sunrisePNG{
position: absolute;
display: normal;
top: 22px;
left: 14px;
height: 22px;
width: 22px;
opacity: 0.9;
z-index: 22;
}
#sunset {
position: absolute;
top: 27.5px;
right: 37px;
width: 50px;
height: 15px;
text-align: right;
font-size: 11px;
font-weight: lighter;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 4px ;
opacity: 0.8;
z-index: 22;
}
#sunsetPNG{ /* Weather Icon position */
position: absolute;
display: normal;
top: 22px;
right: 14px;
height: 22px;
width: 22px;
opacity: 0.9;
z-index: 22;
}
#WidgetWall{
width: 92px;
height: 138px;
position: absolute;
top: 35.5px;
left: 114px;
z-index:-4;
}
#weatherIcon{ /* Weather Icon position */
position: absolute;
display: normal;
top: 45px;
left: 13.5px;
height: 80px;
width: 80px;
opacity: 1;
z-index: 14;
}
#desc{ /* Weather info Position */
position: absolute;
top: 100px;
right: 0px;
width: 96.7px;
height: 20px;
text-align: left;
font-size: 11px;
font-weight: lighter;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
z-index: 14;
opacity: 0.7;
}
#internet{
position: absolute;
top: 158px;
right: 0px;
left: 0px;
width: 320px;
height: 100px;
text-align: center;
font-size: 11px;
font-weight: lighter;
color: red;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px ;
opacity: 0.8;
z-index: 14;
}
#lastupdate{
position: absolute;
top: 27.5px;
left: 0px;
width: 320px;
height: 100px;
text-align: center;
font-weight: lighter;
font-size: 11px;
color: #FFFFFF;
text-shadow: #000000 2px 1px 2px, #000000 0px 0px 3px;
z-index: 14;
opacity: 0.8;
}







