码迷,mamicode.com
首页 > Web开发 > 详细

css3实现iPhone滑动解锁

时间:2014-11-25 17:51:36      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

该效果的主要实现思路是给文字添加渐变的背景,然后对背景进行裁剪,按文字裁剪(目前只有webkit内核浏览器支持该属性),最后给背景添加动画,即改变背景的位置,背景动画效果如下(GIF录制时有卡顿,代码实现时不卡):

bubuko.com,布布扣

最终效果:

bubuko.com,布布扣

全部代码如下:

<!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-light;    /*设置背景为混合模式下的强光模式*/
            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>

需要说明的是由于按文字裁剪目前只有 webkit 内核可用,所以该效果目前不兼容其他内核浏览器。

 

css3实现iPhone滑动解锁

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/ntt1219/p/4121350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!