模仿苹果手机屏保滚动条

我们都知道苹果手机很炫酷，是一种身份的象征，那么它屏保的滚动条是怎么是怎么做成的呢？今天我们就来模仿一下它的屏保滚动条的制作

1、所需知识点

颜色的线性渐变
背景定位
过渡

2、具体步骤

2.1首先用颜色线性渐变制作背景“闪光白条”

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {width:600px;height:200px;margin:200px auto;font-size: 30px;text-align: center;line-height: 200px;color: rgba(0,0,0,0.5);background:-webkit-linear-gradient( -30deg, gray 30%, white 40%, white 50%, gray 60%, gray 100%) no-repeat;}</style>
</head>
<body><div>我最闪亮！！！！！！！！！</div>
</body>
</html>

效果如下图所示：

2.2、背景定位

在div中背景定位，并且给定一个过渡时间

background-position:-1000px 0;
transition:all 2s;

同时点击div时,背景划过

div:hover {background-position: 1000px 0;}

为了效果更加明显，我们把背景颜色设为灰色（和div块颜色相同）此时，效果如下图所示：

2.3我们为了更美观，让闪光白色只在文字上“闪动”

我们在div中加上代码：

-webkit-background-clip:text;

此代码兼容性不是很好，要加浏览器前缀，而且值得注意的是，因为我们是在文字上现实背景颜色，文字必需有个透明度，否则，将没有效果。
最终效果如下：(为了效果更明显，我把背景颜色换成了黑色)

到此，我们的屏保滚动条也就制作完成了

模仿苹果手机屏保滚动条相关推荐

苹果手机输入屏保后锁屏_修一块手机屏幕要7080元？
这几天华为Mate X的两次开售成为大家议论的话题,一些抢到的人自然沉浸在快乐之中,想着是自己留着用,还是转手赚一把. 而一些想抢而没抢到的人或许正在研究如何在明天的第三次开售中抓好机会吧! 当然,也 ...
电脑罗盘时钟代码_苹果电脑怎么设置数字时钟屏保 Word Clock for Mac安装教程
[闽南网] Word Clock Mac版作为一款精美和酷炫的数字时钟屏保,目前受到了非常多的用户的欢迎和使用.word clock作为一款纯文字排版屏幕保护应用,让用户的电脑屏保瞬间变的" ...
C#制作简易屏保（转）
C#制作简易屏保[原创] 原始网址: http://www.cnblogs.com/drizzlecrj/archive/2006/10/06/522182.html 2006-10-06 16:25 ...
用C++编写一个个性化的屏保程序，零基础小白可收藏学习！
C++编写一个个性化的屏保程序,这个屏幕保护程序模仿自一个著名杀毒软件中的待机画面,图标动态变化的屏保程序,进入屏保状态后,程序自动获取一些windows中所安装程序的ICO图标,随机显示一些图标,并 ...
kindle 屏保_送你一台免费Kindle，年度羊毛不要错过
最近出门旅行限制比较多,今天橡树君想分享一个适合宅在家的活动-咪咕kindle0元购. 活动期间通过指定渠道购买咪咕&Kindle联名版机器,连续打卡100天返还购机款,橡树君再三确认了一下, ...
手机屏保密码忘记了怎么解开
本答案提供苹果.华为.小米三种系统的解决方案,手机屏保密码忘记了可以通过恢复出厂设置解开,操作步骤如下: 华为手机 1.长按按音量上键和电源键同时长按手机上的按音量上键和电源键,手机有显示时我们松开 ...
用vue2.6实现一个抖音很火的【时间轮盘】屏保小DEMO
写在前面: 前段时间看抖音,有人用时间轮盘作为动态的桌面壁纸,一时间成为全网最火的电脑屏保,后来小米等运用市场也出现了[时间轮盘],有点像五行八卦,感觉很好玩,于是突发奇想,自己写一个网页版小DEMO ...
linux mint 屏保_Linux Mint 修复了两个孩子发现的屏保锁定绕过漏洞
Linux Mint 修复了两个孩子发现的屏保锁定绕过漏洞据 zdnet 报道,两个孩子在爸爸的电脑上玩耍时,意外发现了绕过屏保,进入锁定系统的方法.根据 bug 报告,这两个孩子在物理键盘和屏幕键 ...
Windows 2003系统也玩图片收藏屏保
Windows Me/XP的屏幕保护程序可以将"我的文档"里收藏的图片做成屏保.但是在Windows其它版本的操作系统中却没有该功能.想将这个功能移植到Windows 2003中去 ...