search

Home >Web Front-end >HTML Tutorial >HTML5/CSS3 implements adding lock screen effect_html/css_WEB-ITnose

HTML5/CSS3 implements adding lock screen effect_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:58:381539browse

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

Html代码  

  1.   

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

Css代码  

  1. #overlay{  
  2.     height:100%;  
  3.     min-width:1280px;  
  4.     width:100%;  
  5.     position:absolute;  
  6.     left:0px;  
  7.     top:0px;  
  8.       
  9.     opacity:0.7;  
  10.         z-index:100;  
  11. }  

    这样就有了一个覆盖页面之上的层，显示效果为： 
 
    下面是添加解除锁定的部分，我们模仿iphone解锁效果，那么需要添加一下： 

Html代码  

  1.   
  2.       
  3.     滑动解除锁定  

A rounded rectangular box with a button image on the left, giving a prompt message, it is not difficult:

Css code

  1. #slide{
  2. position:absolute;
  3. top:75%;
  4. width:52%;
  5. left:24%;
  6. height:86px;
  7. border-radius:18px;
  8. border:1px solid #2F368F;
  9. border- bottom:1px groovy #2F368F;
  10. z-index:101;
  11. background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2F368F ),color-stop(1, #77D1F6));
  12. opacity:0.9;
  13. }

The z-index set here is larger than The modal layer is large so that we can control it. There is not much to say.

Css code

  1. #slider{
  2. float:left;
  3. position:relative;
  4. cursor:pointer;
  5. height:44px;
  6. background: url(../images/arrow.png) no-repeat;
  7. border- radius:16px;
  8. margin:-5px;
  9. text-align:center;
  10. width: 146px;
    11. }
    13. Images are used in the slider, so the effect is better. The width of the rectangular frame is consistent with the slider image setting, and margins can be fine-tuned on their own. The following is the key text area. The effect used here is currently only supported by the webkit kernel, which means that FF does not support this effect for the time being.


Css code

#text{
    height:50px;
    2. width:70%;
    3. float:left;
    4. padding-top:14px;
    5. font-family:"Microsoft Yahei";
    6. font-size:44px;
    7. font-weight:100;
    8. text-align:center;
    9. vertical-align: middle;
    10. background: -webkit-gradient(linear ,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop( 1, #4d4d4d));
    11. -webkit-background-clip: text;
    12. -webkit-text-fill-color: transparent;
    13. -webkit-animation: slidetounlock 5s infinite; 🎜>
    14. Css code
    16. @-webkit-keyframes slidetounlock {
    17. 0% {background-position: -200px 0;}
100%{background-position: 200px 0;}

}


The final effect we simulated is:

The dynamic highlighting part of the text in the picture is the part that other kernels do not support for the time being. In this way, our effect is completed. At this time, it is all static. Nothing can be done, we use jqueryUI's draggable to add dynamic effects:

Js code

  1. $(function() {
  2. var slideWidth=$("#slide").width();
  3. $("#slider").draggable({
  4. axis: 'x',
  5. containment: 'parent',
  6. drag: function(event, ui) {
  7. if (ui.position.left > slideWidth*0.7) {
  8.                                                                                                                                                                           // do nothing
  9. }
  10. },
  11. stop: function(event, ui) {
  12. if (ui.position.left < slideWidth*0.7) {
  13. $(this).animate({left: 0});
  14. }
  15. }
  16. }); 🎜>
    17. } );
    19. We dynamically obtain the set slide width, then apply the draggable method, set the horizontal drag, and when the drag distance reaches 70% of the rectangle length, the modal layer and the slide The block disappears and is restored to the page. Then we have completed adding the lock screen effect to the page.
  19. Finally, the source code is attached, I hope it will be useful to users.
    21. backend.rar (151.8 KB)


    • Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Codeforces Round #250 (Div. 1) D segment tree_html/css_WEB-ITnoseNext article：Codeforces Round #250 (Div. 1) D segment tree_html/css_WEB-ITnose

    Related articles

    See more