你的位置:首页 > 网页设计

[网页设计]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-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>