css3实现渐变的iPhone滑动解锁效果

<!DOCTYPE html> <html> <head>     <style>

        p{

            width:50%;             margin:0 auto;             line-height:50px;             font-size:50px;             text-align:center;             -webkit-background-clip: text;    /*按文字裁剪*/                 -webkit-text-fill-color: transparent;    /*文字的颜色使用背景色*/               background-color:#19385c;    /*设置一个背景色*/                   background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 30%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 70%);        /*设置渐变的背景，按对角线渐变*/             background-blend-mode: hard-li　　ght;    /*设置背景为混合模式下的强光模式*/             background-size: 200%;

            -webkit-animation: shine 4s infinite;    /*给背景添加动画改变位置*/

        }

 

        @-webkit-keyframes shine {

          from {background-position: 100%;}

          to {background-position: 0;}

        }

    </style>

</head>

<body><p>&gt;&nbsp;Slide To Unlock</p></body>

</html>

posted @ 2015-07-23 11:22  天使之星  阅读(273)  评论(0)    收藏  举报