Heim > Artikel > Web-Frontend > css3实现iPhone滑动解锁_html/css_WEB-ITnose
css3实现iPhone滑动解锁_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:53:251121Durchsuche
该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如下（GIF录制时有卡顿，代码实现时不卡）：
最终效果：
全部代码如下：
<!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>> Slide To Unlock</p></body></html> 需要说明的是由于按文字裁剪目前只有 webkit 内核可用，所以该效果目前不兼容其他内核浏览器。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html实现阶乘，为什么不对，大神们帮我看看_html/css_WEB-ITnoseNächster Artikel：Codeforces Round #279 (Div. 2) 解题报告_html/css_WEB-ITnose