Question

我正在尝试使用伪元素选择器为文本的first letter设置动画。但是，它不起作用。如果我将span中的第一个字母换行，则该代码可以正常工作，但不适用于伪元素选择器（::first-letter）。

div.w-text-h a.w-text-value{display:block;}
div.w-text-h a.w-text-value::first-letter{
    top: 50%; 
    right: 50%;
    transform: translate(50%,-50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 50px;
    font-weight: 700;
    color: #f5f5f5;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
  
    text-shadow: 1px 1px 1px #5DADE2,
        1px 2px 1px #5DADE2,
        1px 3px 1px #5DADE2,
        1px 4px 1px #5DADE2,
        1px 5px 1px #5DADE2,
        1px 6px 1px #5DADE2,
        1px 7px 1px #5DADE2,
        1px 8px 1px #5DADE2,
        1px 9px 1px #5DADE2,
        1px 10px 1px #5DADE2,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}



div.w-text-h a.w-text-value::first-letter{animation:animated_div 5s infinite;
			-moz-animation:animated_div 5s infinite;
			-webkit-animation:animated_div 5s infinite;
			border-radius:5px;
			-webkit-border-radius:5px;
			transform-style: preserve-3d;}
			
	@keyframes animated_div
		{
			0%   {}
			20%  {transform: rotateY(20deg);}
			40%  {transform: rotateY(40deg);}
			60%  {transform: rotateY(60deg);}
			80%  {transform: rotateY(80deg);}
			100% {transform: rotateY(100deg);}
  
		}

<div class="w-text-h"><a class="w-text-value" href="http://localhost/Developer/">Developer</a></div>

如果我删除伪元素first-letter，则动画有效。我在伪元素first-letter

上需要它

Answer 1

您不能将builder.Register(c => c.Resolve<IClientContextProvider>().GetClientContext()) .As<IClientContext>() .InstancePerLifetime(); builder.Register(c => c.Resolve<IDbContextFactory>().CreateDbContext()) .As<IDbContext>() .InstancePerLifetime();应用于transform（check properties list）。但是您可以为此使用不同的包装器，然后才有可能。您也可以使用一些JS包装首字母。

::first-letter

div.w-text-h a.w-text-value{display:block;}
div.w-text-h a.w-text-value .first-letter{
    display: inline-block;
    top: 50%; 
    right: 50%;
    transform: translate(50%,-50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 50px;
    font-weight: 700;
    color: #f5f5f5;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
  
    text-shadow: 1px 1px 1px #5DADE2,
        1px 2px 1px #5DADE2,
        1px 3px 1px #5DADE2,
        1px 4px 1px #5DADE2,
        1px 5px 1px #5DADE2,
        1px 6px 1px #5DADE2,
        1px 7px 1px #5DADE2,
        1px 8px 1px #5DADE2,
        1px 9px 1px #5DADE2,
        1px 10px 1px #5DADE2,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}



div.w-text-h a.w-text-value .first-letter{animation:animated_div 5s infinite;
			-moz-animation:animated_div 5s infinite;
			-webkit-animation:animated_div 5s infinite;
			border-radius:5px;
			-webkit-border-radius:5px;
			transform-style: preserve-3d;}
			
	@keyframes animated_div
		{
			0%   {}
			20%  {transform: rotateY(20deg);}
			40%  {transform: rotateY(40deg);}
			60%  {transform: rotateY(60deg);}
			80%  {transform: rotateY(80deg);}
			100% {transform: rotateY(100deg);}
  
		}

如何使用CSS3为首字母设置动画

1 个答案: