SVG如何用阴影和变化的z-index元素来实现类似的例子？
如需完整效果，请展开至全屏并单击以查看动画。
const shadows = document.getElementsByClassName("shadows")[0];
const shadowsChildren = shadows.children;
let count = 0;
let left = false;
shadows.addEventListener("click", function() {
let interval = setInterval(function() {
!left ? count++ : count--;
shadowsChildren[left ? count : count - 1].style.zIndex = left ? count : shadowsChildren.length - count;
shadowsChildren[left ? count : count - 1].className = !left ? 'span' : '';
if (count === shadowsChildren.length) {
left = true;
clearInterval(interval);
}
if (count === 0) {
left = false;
clearInterval(interval);
}
}, 100);
});* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
}
.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: orange;
}
.shadows {
cursor: pointer;
background: orange;
position: relative;
text-shadow: -15px 5px 20px #303030;
width: 80vw;
color: orange;
text-align: center;
letter-spacing: -20px;
transition: all 0.25s ease-out .2s;
font-family: fantasy;
font-size: 200px;
}
span {
position: relative;
margin-left: -10px;
transition: all 0.25s ease-out;
}
span.span {
text-shadow: 15px 5px 20px #303030;
transition: all 0.25s ease-out;
}<div id="wrapper">
<div class="container">
<div class="shadows">
<span>C</span>
<span>L</span>
<span>I</span>
<span>C</span>
<span>K</span>
<span>M</span>
<span>E</span>
</div>
</div>
</div>选项css:hover
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
}
.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: orange;
}
.shadows {
cursor: pointer;
background: orange;
position: relative;
text-shadow: -15px 5px 20px #303030;
width: 80vw;
color: orange;
text-align: center;
letter-spacing: -20px;
transition: all 0.25s ease-out .2s;
font-family: fantasy;
font-size: 200px;
}
span {
position: relative;
margin-left: -18px;
transition: all 0.25s ease-out;
}
.shadows:hover span {
text-shadow: 15px 5px 20px #303030;
}
.shadows:hover span:nth-child(1) {
z-index: 8;
}
.shadows:hover span:nth-child(2) {
z-index: 7;
}
.shadows:hover span:nth-child(3) {
z-index: 6;
}
.shadows:hover span:nth-child(4) {
z-index: 5;
}
.shadows:hover span:nth-child(5) {
z-index: 4;
}
.shadows:hover span:nth-child(6) {
z-index: 3;
}
.shadows:hover span:nth-child(7) {
z-index: 2;
}
.shadows:hover span:nth-child(8) {
z-index: 1;
}<div class="container">
<div class="shadows">
<span>C</span>
<span>L</span>
<span>I</span>
<span>C</span>
<span>K</span>
<span>M</span>
<span>E</span>
</div>
</div>
阴影动画
动画是通过改变
dx滤镜属性来实现的feOffset要执行的命令：
阴影是使用置换过滤器制作的 -
feOffset和模糊 -feGaussianBlur为了获得将一个字母叠加在另一个字母上的效果，我必须使用过滤器为每个字母编写一个单独的命令：
不幸的是，该应用程序看起来有点不同
FireFox。Chrome以下是申请的全文。
复杂的运动动画
此动画的基础是单个字母的移动以及创建阴影的过滤器。
字母的所有移动都是通过改变“X”属性值的命令来实现的，它指定了字母的横坐标：
为了不混淆不同动画的开始和结束顺序，有必要考虑一个命名唯一动画标识符的系统。
begin="anC",begin="anL"对于将字母返回到其原始位置的动画：
begin="anBackC",begin="anBackL"动画序列的逻辑是使用以下结构实现的：
begin="anBackC.end+0.25s"换句话说，听起来像这样 - 字母“L”的返回动画将在字母“C”的返回动画结束后开始，在等于0.25s（秒） 的暂停之后在全屏片段模式下观看更有趣的内容