我有以下代码,我在 CSS 中制作移动 div 的动画。但我还想为文本的阴影设置动画,以某种方式模拟我的文本的权重:
div#main {
background-color: #2E2E2E;
}
div#lblCaption {
margin-bottom: 0px;
color: #C7C7C7;}
div#NodeCaptionContainer{
animation-duration: .7s;
animation-name: fadeAndScale;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fadeAndScale {
from {
opacity: 0;
transform: scale(.9, .9);
text-shadow: 0 0 .75px rgb(255, 255, 255), 0 0 .75px rgb(255, 255, 255);
}
to {
opacity: 1;
transform: scale(1, 1);
text-shadow: 0 0 .0px rgb(255, 255, 255), 0 0 .0px rgb(255, 255, 255);
}
}
<div id="main">
<div id="NodeCaptionContainer">
<div id="lblCaption" class="pretty p-default p-thick p-pulse"><p class="noMargin"> Node: 1:9 Type: Function Read: 480B Write: 1088B </p></div>
</div>
</div>
问题是平移的动画是由 animation-timing-function
顺利完成的,但阴影的动画却没有。我还想平滑阴影过渡。有没有一种方法可以平滑 CSS 中的阴影过渡?
最佳答案
https://jsfiddle.net/Liamm12/6d9p5uun/67/
在 NodeCaptionContainer
中定义了 text-shadow
并使用 forwards
来避免返回到与 NodeCaptionContainer
相同的代码然后使用 keyframes
div#main {
background-color: #2E2E2E;
}
div#lblCaption {
margin-bottom: 0px;
color: #C7C7C7;}
div#NodeCaptionContainer{
-webkit-animation: fadeAndScale .7s ease-in-out forwards;
animation: fadeAndScale .7s ease-in-out forwards;
text-shadow: 0 0 .75px red, 0 0 .75px red;
}
@keyframes fadeAndScale {
from {
opacity: 0;
transform: scale(.9, .9);
}
to {
opacity: 1;
transform: scale(1, 1);
text-shadow: 0 0 0 rgb(255, 255, 255);
}
}
<div id="main">
<div id="NodeCaptionContainer">
<div id="lblCaption" class="pretty p-default p-thick p-pulse"><p class="noMargin"> Node: 1:9 Type: Function Read: 480B Write: 1088B </p></div>
</div>
</div>
关于html - CSS中文本阴影的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49389750/