HTML5/CSS3实现添加锁屏效果

2024-04-27 14:32:52

字体：大中小

来源：转载

供稿：网友

HTML5/CSS3实现添加锁屏效果锁屏效果，也就是将屏幕置于模态，不允许用户触发任何动作，只能解除锁定后才能继续使用，jQueryUI的dialog有模态对话框，这一点不难做到。那么，首先需要在页面中添加一个div层，用于做模态的层：Html代码

其对应的CSS比较简单，主要设置一下z-index属性，值设置的很大即可，就能达到覆盖其余元素的效果，加上opacity淡化一下背景：Css代码

这样就有了一个覆盖页面之上的层，显示效果为：

下面是添加解除锁定的部分，我们模仿iphone解锁效果，那么需要添加一下：Html代码

一个圆角矩形框，左侧是按钮图片，给出一个提示信息，难度不大：Css代码

#slide{
position:absolute;
top:75%;
width:52%;
left:24%;
height:86px;
border-radius:18px;
border:1pxsolid#2F368F;
border-bottom:1pxgroovy#2F368F;
z-index:101;
background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0,#2F368F),color-stop(1,#77D1F6));
opacity:0.9;
}

这里设置的z-index要比模态层大，这样我们才能操控到，没什么多说的。Css代码

滑块中使用了图片，这样效果更好点，矩形框的宽度和滑块图片设置一致，margin等可以自行继续微调。下面是关键的text区域部分，这里使用的效果目前仅webkit内核支持，那么就是说FF暂时不支持该效果。Css代码

#text{
height:50px;
width:70%;
float:left;
padding-top:14px;
font-family:"微软雅黑";
font-size:44px;
font-weight:100;
text-align:center;
vertical-align:middle;
background:-webkit-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(0.4,#4d4d4d),color-stop(0.5,white),color-stop(0.6,#4d4d4d),color-stop(1,#4d4d4d));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:slidetounlock5sinfinite;
-webkit-text-size-adjust:none;
}

加上下面的动画：Css代码