模仿苹果手机屏保滚动条

最新推荐文章于 2021-08-04 09:49:19 发布

sinat_33441740

最新推荐文章于 2021-08-04 09:49:19 发布

阅读量1.3k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/sinat_33441740/article/details/52294173

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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;

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

这里写图片描述

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

sinat_33441740

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录