Question

我从其他地方借来了维恩动画，并希望在维恩中放置图标（通过CSS类的离子化），以便它们按照动画进行动画处理。

我尝试了许多方法，但是到目前为止，最接近成功的方法是基本上使用相同的参数运行两组动画，在代码中一个接一个地运行。

虽然符号和CSS圆的动画现在都相同，但是它们不占用相同的空间，因此也不会按照我的要求进行叠加。在现有代码中如何实现？我已经尝试过填充，边距等，但这会使圆形图形倾斜。

谢谢。

动画无法在Stack Overflow编辑器中运行，因此请在Codepen上查看： Link to animation on Codepen.

    import-module activedirectory


    $workstations = Get-ADComputer -Filter "OperatingSystem -like 'Windows 10 *'" -Property * | select name -ExpandProperty Name


    foreach ($workstation in $workstations)
{

$session = New-PSSession -Computername $workstation 


$resultofsession = Invoke-Command -Session $Session -ScriptBlock{




$Path="HKLM:\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\*"       
$path2 = "HKLM:\SOFTWARE\Microsoft\Internet Explorer\"

$java = Get-ItemProperty $Path | Select-Object DisplayName, DisplayVersion | where displayname -like "java*"
$chrome =  Get-ItemProperty $path | Select-Object DisplayName, DisplayVersion | where displayname -ceq "Google Chrome"
$adobe = Get-ItemProperty $path | Select-Object DisplayName, DisplayVersion | where displayname -ceq "Adobe Acrobat Reader DC"
$edge = Get-AppxPackage -Name Microsoft.MicrosoftEdge | select-object Version
$ie = get-itemProperty $path2 

$Object = New-Object PSObject -property @{

'chrome'        = "CHROME: " + $chrome.displayversion + ","
'edge'          = "EDGE: " + $edge + ","
'ie'            = "IE: " + $ie.svcVersion + ","
'java'          = "JAVA: " + $java.Displayversion + ","
'adobe'         = "ADOBE: " + $adobe.displayversion + ","
'hostname'      = hostname

}

Write-output $object 

}

remove-pssession $session

write-output $resultofsession | format-table -HideTableHeaders -autosize -force | Out-File "C:\web\Version.txt" -append

}

* {
  box-sizing: border-box;
}
body {
  background-image: radial-gradient(#fff 25%, #bbb 75%);
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.box {
  height: 50vh;
  width: 50vh;
}
[class^='c'] {
  background-color: #0ff;
  border-radius: 50%;
  height: 50vh;
  width: 50vh;
  mix-blend-mode: multiply;
  position: absolute;
}
.circle1 { /*blue*/
  background-color: rgba(0,255,255,0.5);
  animation: c1 2.5s ease 4 forwards;
}

/*.ion-code{
  animation: code-symbol 2.5s ease 4 forwards; 
  transform: translate(15%, -12%);
}*/

.circle2 { /*yellow*/
  background-color: rgba(255,255,0,0.5);
  animation: c2 2.5s ease 4 forwards ;
}
.circle3 {/*pink*/
  background-color: rgba(255,0,255,0.5);
  animation: c3 2.5s ease 4 forwards ;
}
/*---------------------------------------C1-BLUE-*/

@keyframes c1 {
  0% {transform: translate(0, 0); }
  100% {transform: translate(-25%, 25%); }
}

 /*@keyframes code-symbol {
   0% {transform: translate(0, 0); }
  100% {transform: translate(-25%, 25%); }
}*/

/*---------------------------------------C2-YELLOW-*/

@keyframes c2 {
  from {
            transform: translate(0, 0);
            
  }
  to {

            
            transform: translate(0, -25%);
  }
}

/*---------------------------------------C3-PINK-*/

@keyframes c3 {
  from {
            transform: translate(0, 0);
           
    }
    to {

             transform: translate(25%, 25%);
  }
}

/*--------Symbol layer -----------*/

[class^='ion-'] {
  border-radius: 50%;
  height: 150vh;
  width: 150vh;
  mix-blend-mode: multiply;
  position: absolute;
}

.ion-code { /*blue*/
  /*background-color: rgba(0,255,255,0.5);*/
  animation: ion-code 2.5s ease 4 forwards;
  font-size: 4rem;

}

.ion-arrow-graph-up-right { /*yellow*/
 /* background-color: rgba(255,255,0,0.5); */
  animation: ion-arrow-graph-up-right 2.5s ease 4 forwards;
  font-size: 4rem;
}
.ion-ios-settings-strong {/*pink*/
/*  background-color: rgba(255,0,255,0.5); */
  animation: ion-ios-settings-strong 2.5s ease 4 forwards;
  font-size: 4rem;
}
/*---------------------------------------C1-BLUE-*/

@keyframes ion-code {
  from {transform: translate(0, 0); }
  to {transform: translate(-25%, 25%); }
}

/*---------------------------------------C2-YELLOW-*/

@keyframes ion-arrow-graph-up-right {
  from {transform: translate(0, 0);}
  to {transform: translate(0, -25%);}
}

/*---------------------------------------C3-PINK-*/

@keyframes ion-ios-settings-strong {
  from {transform: translate(0, 0);}
    to {transform: translate(25%, 25%);}
}

Answer 1

在此示例中，您只需要定位图标所在的:before伪元素

SEE CODEPEN

.circle1:before, .circle2:before, .circle3:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

干杯。

Answer 2

我个人而言，我喜欢使用flexbox进行这种居中：

[class*='ion-']:before {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

https://codepen.io/anon/pen/xydGzK

难以覆盖纯CSS动画

2 个答案: