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

浏览数：27 / 时间：2015年06月09日

先贴代码

<!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>

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log 代码 使用 html si it la class style log 代码 使用 html si it la

相关文章

随机文章

您可能还喜欢

您可能还喜欢