小贝子编程

如何使盒子阴影动画从侧面反弹?我在哪里错了



i有一个 box-shadow属性被动画的划分（ .Animate）。我希望它像我应用于第二分区（.Animate2）一样从右侧反弹。请运行代码片段以查看动画。所需的动画由第二分区展示。

对于第二个部门，我通过对其宽度进行动画＆amp;进行了使用:before元素进行所需的动画。左边。但是我想要一种消除伪元素的方法。我有代码试图将WidthAni的动画密钥帧复制到BoxShadowAni的密钥帧中，但是两个部门的动画都不相同。我想念什么？我的逻辑在哪里让我失望？（关键框后说明我的逻辑后的评论。）

这是我的代码：

body {
  background: #222;
  color: #ddd;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.Animate {
  box-shadow: 600px 0px #ddd inset;
  color: #222;
  padding: 0 0.5em;
  animation: BoxShadowAni 5.0s infinite linear;
}
.Animate2 {
  color: #222;
  padding: 0 0.5em;
  position: relative;
}
.Animate2:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: #ddd;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: WidthAni 5.0s infinite ease-in-out;
}
@-webkit-keyframes BoxShadowAni {
  0% {box-shadow: 0px 0px #ddd inset;}/*Starts from left edge*/
  10% {box-shadow: 600px 0px #ddd inset;}/*To grow upto the left edge*/
  20% {box-shadow: -5px 0px #ddd inset;}/*To reduce in length upto the right edge*/
  25% {box-shadow: -5px 0px #ddd inset;}/*To stay for a while and then bounce back*/
  35% {box-shadow: -600px 0px #ddd inset;}/*Grow upto the right edge*/
  45% {box-shadow: 0px 0px #ddd inset;}/*To reduce in length upto the left edge*/
  100% {box-shadow: 0px 0px #ddd inset;}/*To insert a pause b4 animation loops back*/
}
@-webkit-keyframes WidthAni {
  0% {width: 0px}
  10% {width: 100%;left: 0;right: 0}
  20% {width: 5%;left: 95%;}
  25% {width: 5%;left: 95%;}
  35% {width: 100%;left: 0%;}
  45% {width: 0%;}
  100% {width: 0%;}
}
<div class='Animate'>BoxShadow</div>
<div class='Animate2'>Width Ani</div>

我认为问题是当您将阴影更改为另一个时。我建议您依靠多个盒子阴影来实现这一目标，并且您将获得更好的渲染。诀窍是要确保在更改阴影时始终覆盖整个区域。

因此，您可以从300px 0px #ddd inset转到-300px 0px #ddd inset，您可以在其中闪烁，您可以做到这一点：

300px 0px #ddd inset,0px 0px #ddd inset to 300px 0px #ddd inset,-300px 0px #ddd inset，然后to 0px 0px #ddd inset,-300px 0px #ddd inset 

body {
  background: #222;
  color: #ddd;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.Animate {
  color: #222;
  padding: 0 0.5em;
  animation: BoxShadowAni 5.0s infinite linear;
}
.Animate2 {
  color: #222;
  padding: 0 0.5em;
  position: relative;
}
.Animate2:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: #ddd;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: WidthAni 5.0s infinite ease-in-out;
}
@-webkit-keyframes BoxShadowAni {
  0% {
    box-shadow: 0px 0px #ddd inset, 0px 0px #ddd inset;
  }
  10% {
    box-shadow: 300px 0px #ddd inset,0px 0px #ddd inset;
  }
  10.1% {
    box-shadow: 300px 0px #ddd inset,-300px 0px #ddd inset;
  }
  10.2% {
    box-shadow: 0px 0px #ddd inset,-300px 0px #ddd inset;
  }
  20% {
    box-shadow: 0px 0px #ddd inset,-5px 0px #ddd inset;
  }
  25% {
    box-shadow: 0px 0px #ddd inset,-5px 0px #ddd inset;
  }
  35% {
    box-shadow: 0px 0px #ddd inset,-300px 0px #ddd inset;
  }
  35.1% {
    box-shadow: 300px 0px #ddd inset,-300px 0px #ddd inset;
  }
  35.2% {
    box-shadow: 300px 0px #ddd inset,0px 0px #ddd inset;
  }
  45%,100% {
    box-shadow: 0px 0px #ddd inset,0px 0px #ddd inset;
  }
}
@-webkit-keyframes WidthAni {
  0% {
    width: 0px
  }
  10% {
    width: 100%;
    left: 0;
    right: 0
  }
  20% {
    width: 5%;
    left: 95%;
  }
  25% {
    width: 5%;
    left: 95%;
  }
  35% {
    width: 100%;
    left: 0%;
  }
  45% {
    width: 0%;
  }
  100% {
    width: 0%;
  }
}
<div class='Animate'>BoxShadow</div>
<div class='Animate2'>Width Ani</div>

好的，因此使用box-shadow似乎是一种非常复杂的方法，很难操纵。

如果要使用伪级，只需将其带有背景颜色并移动它即可。示例＃1 。

如果您不想要伪级动画背景可能更容易，因此您可以使用渐变示例＃2 来做到这一点，但是有时可能会有模糊的边缘。因此，另一个选项是使用图像（BASE64编码和嵌入以避免任何其他文件）示例＃3 。

最后，上述解决方案要求您使用与背景相同的颜色文本。但是有一个CSS属性为此：clip-path。作为奖励，它也适用于内联元素... 示例4＆amp;5 

body {
  padding: 30px;
  background-color: #333;
  color: #fff;
  font-family: Helvetica, Arial, Sans-Serif;
}
.reveal {
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  width: 400px;
  border: 1px solid #ddd;
  color: #333;
}
.pseudo {
  overflow: hidden;
  position: relative;
}
.pseudo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  z-index: -1;
  -webkit-animation: pseudo 10s infinite ease-in-out;
          animation: pseudo 10s infinite ease-in-out;
}
@-webkit-keyframes pseudo {
  0% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
  50% {
    -webkit-transform: translatex(100%);
            transform: translatex(100%);
  }
  100% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
}
@keyframes pseudo {
  0% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
  50% {
    -webkit-transform: translatex(100%);
            transform: translatex(100%);
  }
  100% {
    -webkit-transform: translatex(-100%);
            transform: translatex(-100%);
  }
}
.background {
  background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAC1JREFUOBFjvHv37n8GKgImKpoFNmrUQMpDdDQMR8OQjBAYTTZkBBqalhEYhgAuSwO+G+SAowAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left top;
  -webkit-animation: background 5s alternate infinite ease-in-out;
          animation: background 5s alternate infinite ease-in-out;
}
@-webkit-keyframes background {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
    background-position: left top;
  }
  51% {
    background-size: 100% 100%;
    background-position: right top;
  }
  100% {
    background-size: 0% 100%;
    background-position: right top;
  }
}
@keyframes background {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
    background-position: left top;
  }
  51% {
    background-size: 100% 100%;
    background-position: right top;
  }
  100% {
    background-size: 0% 100%;
    background-position: right top;
  }
}
.gradient {
  background: linear-gradient(90deg, #dddddd 0%, #dddddd 50%, rgba(221, 221, 221, 0) 50.01%, rgba(221, 221, 221, 0) 100%);
  background-size: 200% 100%;
  -webkit-animation: gradient 5s alternate infinite ease-in-out;
          animation: gradient 5s alternate infinite ease-in-out;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}
@keyframes gradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -100% 0%;
  }
}
.clip {
  color: #4394ED;
  background: #ddd;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  -webkit-animation: clip 5s alternate infinite ease-in-out;
          animation: clip 5s alternate infinite ease-in-out;
}
@-webkit-keyframes clip {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
@keyframes clip {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
<h2>Text Reveal</h2>
<div class="reveal pseudo">Reveal Text (Pseudo Class)</div>
<div class="reveal gradient">Reveal Text (gradient)</div>
<div class="reveal background">Reveal Text (background-image)</div>
<div class="reveal clip">Reveal Text (clip-path)</div>
<span class="clip">Works on inline elements too...</span>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium