【Apple官网特效】文字充电效果

最新推荐文章于 2022-11-02 15:04:42 发布

zyzs

最新推荐文章于 2022-11-02 15:04:42 发布

阅读量218

点赞数

分类专栏：随手记录文章标签： css html js css3 javascript

原文链接：https://www.bilibili.com/video/BV1dK411G7hg

版权

随手记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如下
在这里插入图片描述
代码里面有关键点的注释

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #000;
      }
      h1 {
        /* 定义一个css变量 */
        --progress: 0;
        color: transparent;
        margin: 0 auto;
        width: 50%;
        /* color: #fff; */
        font-size: 60px;
        font-family: Helvetica, sans-serif;
        letter-spacing: -3px;
        /* 设置背景渐变是是用background-image的属性 不是background-color 也可以直接简写成background */
        /* 用calc去计算为0的值 通过var去获取变量的值 */
        background-image: linear-gradient(
          #fff calc(100% - calc(var(--progress) * 100%)),
          #4cd265 calc(100% - calc(var(--progress) * 100%))
        );
        /* 设置背景颜色在文字上 加入-webkit解决兼容问题 */
        background-clip: text;
        -webkit-background-clip: text;
        /* clamp属性有三个值 第一个是最小 第三个是最大 第二个是判断 假如小于第一就采用第一个值 反之采用第三个 不大不小采用它自己 */
        /* 使用calc计算progress 小于1的时候为负数 等于一的时候为正数且大于1.3 */
        transform: scale(clamp(1, calc((var(--progress) - 0.99) * 200), 1.3));
        /* 加入过渡效果 */
        transition: 0.3s transform ease-out;
      }
      .button {
        position: absolute;
        bottom: 0;
        padding: 20px;
      }
      .button button {
        display: inline-block;
        font-size: 32px;
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 12px;
        margin: 0 10px;
      }
    </style>
  </head>
  <body>
    <h1>Up to 20 hours of battery life — the longest in any Mac ever .</h1>
    <div class="button">
      <button id="empty">0%</button>
      <button id="full">100%</button>
    </div>
    <script>
      let progress = 0
      function run() {
        if (progress < 1) {
          progress = parseFloat((progress + 0.01).toFixed(2))
          // 通过setProperty 将 progress设置到css的变量里面
          document.querySelector('h1').style.setProperty('--progress', progress)
          setTimeout(run, 20)
        }
      }
      document.querySelector('#empty').addEventListener('click', (e) => {
        progress = 0
        document.querySelector('h1').style.setProperty('--progress', progress)
      })
      document.querySelector('#full').addEventListener('click', (e) => {
        run()
      })
    </script>
  </body>
</html>

zyzs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Apple官网特效】文字充电效果

效果如下代码里面有关键点的注释<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>
复制链接

扫一扫