css3实现渐变的iPhone滑动解锁效果
2024-08-20 16:08:40
先贴代码
<!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:;}
}
</style>
</head>
<body><p>> Slide To Unlock</p></body>
</html>
最新文章
- Centos下安装Mongodb
- 为什么C#中应该用Try-Catch?
- 读jQuery源码 - Deferred
- AsyncTask源码解析
- shared_ptr 和 unique_ptr
- Eclipse配置信息
- 数字图象处理MATLAB学习
- 总结一下const和readonly
- Android开发ImageView控件缩放图片
- jdk-动态代理
- jquery easy ui 学习 (9)Pagination in TreeGrid 分页
- mysql 数据库连接(远程和本地原理同样)
- 如何开发一个微信小程序
- Ubuntu16.04安装NVIDIA驱动时的一些坑与解决方案
- FPGA高速ADC接口实战——250MSPS采样率ADC9481
- 使用scss为css样式自动添加浏览器前缀
- css学习2
- j2ee分布式缓存同步实现方案dlcache
- Mac os fatal error: &#39;numpy/arrayobject.h&#39; file not found
- 学习ASP.NET Core,你必须了解无处不在的“依赖注入”(转载)
热门文章
- 55.Android之AsyncTask介绍 (转)
- genymotion访问电脑的localhost
- android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏
- Android成长日记-使用GridView显示多行数据
- bc#27做题笔记
- PHP漏洞全解
- POJ 3662 Telephone Lines(二分+最短路)
- CF 701C They Are Everywhere(尺取法)
- python Scrapy安装和介绍
- 关于input/textarea提交内容空格回车转换问题,以及ng-model去除空格问题