Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css] 第359天 用css3实现伪3D的文字效果 #2209

Open
haizhilin2013 opened this issue Apr 8, 2020 · 3 comments
Open

[css] 第359天 用css3实现伪3D的文字效果 #2209

haizhilin2013 opened this issue Apr 8, 2020 · 3 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第359天 用css3实现伪3D的文字效果

我也要出题
@haizhilin2013 haizhilin2013 added the css css label Apr 8, 2020
@liuyingbin19222
Copy link

liuyingbin19222 commented Apr 9, 2020 •
edited
Loading

使用text-shadow效果:

    color: white;
    text-shadow: 1px 1px 0 #158af7,  
    2px 2px 0 #158af7, /* end of 2 level deep grey shadow */
    3px 3px 0 #158af7,
    4px 4px 0 #158af7,
    5px 5px 0 #158af7,
    6px 6px 0 #158af7; /* end of 4 level deep dark shadow */

@mx623303468
Copy link

  • 利用text-shadow 的阴影效果实现伪3D。
  • 一条阴影由<颜色> <偏移量> <模糊半径>组成。
    • 语法： text-shadow: <颜色> <偏移量> <模糊半径>。
  • 可以有多条阴影叠加，用逗号隔开。
    • 语法： text-shadow: <颜色> <偏移量> <模糊半径>, <颜色> <偏移量> <模糊半径>
  • MDN参考资料

@censek
Copy link

censek commented May 28, 2020 •
edited
Loading 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> 交错跳跃3D Loading</title>
</head>
<style>
  body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #2980b9;
  }

  .loading {
    display: flex;
    color: white;
    font-size: 5em;
    text-transform: uppercase;
  }

  .loading span {
    text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
    transform: translateY(20px);
    animation: bounce 0.3s ease infinite alternate;
  }

  @keyframes bounce {
    to {
      text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2);
      transform: translateY(-20px);
    }
  }
</style>

<body>
  <div class="loading">Loading</div>
</body>

</html>
<script>
  let loading = document.querySelector(".loading");
  let letters = loading.textContent.split("");
  loading.textContent = "";
  letters.forEach((letter, i) => {
    let span = document.createElement("span");
    span.textContent = letter;
    span.style.animationDelay = `${i / 10}s`;
    loading.append(span);
  });
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@haizhilin2013 @liuyingbin19222 @mx623303468 @censek